I am working on an application where I have to generate a table report, based on user filter.
And user can filter the result and submit new query using different parameter. Depending one of the checkbox and the results lists,I have to show hide a column in table.
How I can implement in an Angular way?
You can use ng-show with condition, like this:
<select ng-model="filter">
<option value="blah"></option>
<option value="foo"></option>
</select>
<table>
<tr>
<td>1</td>
<td ng-show="filter=='blah'">blah blah</td>
</tr>
<tr>
<td>2</td>
<td ng-show="filter=='blah'">foo foo</td>
</tr>
</table>
tr, if you want hide columns -apply to td. Why harder? Updated answer example.
Showing and hiding columns seems a lot more involved than this to me. It's more than just simply applying a conditional ng-show attribute to an event handler -- at least, I have not found that idea to work as intended.
I'm currently researching how to hide a whole column of data in a database table and I came across this blog post just now. It sounds like a workable solution and I can actually understand what the author is talking about -- which is a big deal for me as I'm only just learning my way around Angular. Here is the link in case it helps you or someone else out on this issue. I'll report back later whether it helped me or not.
http://entwicklertagebuch.com/blog/2013/11/datatable-with-fully-dynamic-columns-in-angularjs/
(Sample code from the link)
function createTDElement(directive) {
var table = angular.element('<table><tr><td ' + directive + '></td></tr></table>');
return table.find('td');
}
app.directive('item', function($compile) {
function createTDElement(directive) {
var table = angular.element('<table><tr><td ' + directive + '></td></tr></table>');
return table.find('td');
}
function render(element, scope) {
var column, html, i;
for (i = 0; i < scope.columns.length; i++) {
column = scope.columns[i];
if (column.visible) {
html = $compile(createTDElement(column.directive))(scope);
element.append(html);
}
}
}
return {
restrict: 'A',
scope: {
item: "=",
columns: "="
},
controller: function($scope, $element) {
$scope.$watch(function() {
return $scope.columns;
}, function(newvalue, oldvalue) {
if (newvalue !== oldvalue) {
$element.children().remove();
render($element, $scope);
$compile($element.contents())($scope);
}
}, true);
},
compile: function() {
return function(scope, element) {
render(element, scope);
}
}
};
});
Consider adding a conditional style to a <col/> with ng-style or ng-class
