Angular ng class with filter on class value
I have a tr table with ng-repeat where I colored the background of the row in time. ColorClassFilter returns class value depending on the time elapsed after:
<tr ng-repeat="object in objects" class={{object.time | colorClassFilter}}>
<td>...
<td>...
</tr>
This worked great, but now I want to add a checkbox that allows the user to toggle on / off the coloring associated with the boolean useRowColors. I want to use the ng class conditionally, but not sure how. This is what I tried and it doesn't work.
<tr ng-repeat="object in objects" ng-class="{ object.time | colorClassFilter : useRowColors }">
EDIT : After reading jitch_it's answer (which didn't work), it made me try this:
<tr ng-repeat="object in objects" ng-class="{'{{object.time | colorClassFilter}}' : useRowColors}">
This is what it produces in the DOM for useRowColors true:
<tr class="ng-scope ''" ng-class="{'rowColorBlue' : useRowColors}" ng-repeat="object in objects" >
Instead (which is what I expected to see):
<tr class="rowColorBlue" ng-class="{'rowColorBlue' : useRowColors}" ng-repeat="object in objects" >
I'm guessing I need another layer of compilation via angular somehow ?? What am I missing?
source to share
You cannot easily use a filter with an attribute ng-class
. However, you can implement the required functionality as before with a simple attribute class
:
<tr ng-repeat="object in objects" class="{{useRowColor && (object.time | colorClassFilter) || ''}}">
<td>...</td>
<td>...</td>
</tr>
There is an answer explaining a little more when to use class
instead of ng-class
How to use an AngularJS filter in ngClass?
source to share
It seems more complicated to me ... I suggest using a combination between css and a helper class in the table tag.
I created this plunker to demonstrate this: http://plnkr.co/edit/28gP1GcnCdPMZWXxYegZ?p=preview
<input type="checkbox" ng-model="coloured"/> Coloured?
<table ng-class="{colouredTable: coloured}">
<tr ng-repeat="item in items" ng-class="{evenrow: $index % 2 == 0}">
<td>{{item.someValue}}</td>
</tr>
</table>
Hope it helps
source to share
Not sure if it's good practice to change the object type in the filter (date for class). However, here is the solution to your main problem.
First define a radio button in your current scope.
Then a third parameter is passed in your filter function, which is a switch to determine if the filter should work or not.
Then inside the filter check the switch, if it is off, just return the input. This will return the entire list that you pass to it if the switch is off.
To your html attribute, just add: it is followed by the name of the radio button at the end of the filter and it should work just fine /
I didn't have the filter code, so I created a sampling filter myself that has an on / off switch. Here's an example given in plnkr:
http://plnkr.co/edit/kc2j8aquHn2cqMDlcRQm?p=preview
This is how I use the filter in html. Note the use filterSwitchOn
at the end of the filter.
<li ng-repeat="item in items | searchFilter:filterText:filterSwitchOn">{{item.name}}
Below segment will link two elements in html to set the radio button and filter text:
<p>
<input type="checkbox" ng-model="filterSwitchOn">Switch Filter On</input>
</p>
<input type="text" ng-model="filterText" />
Finally, this is a simplified angular app that provides a filter:
var app = angular.module('angularjs-starter', []);
app.filter('searchFilter', function() {
return function(input, expected, filterSwitchOn) {
if (!filterSwitchOn)
return input;
else {
var out = [];
for (var i = 0; i < input.length; i++) {
for (var key in input[i]) {
if (key !== undefined) {
var fieldValue = input[i][key];
if (String(fieldValue).indexOf(expected) >= 0) {
out.push(input[i]);
break;
}
}
}
}
return out;
}
};
});
app.controller('MainCtrl', function($scope, $attrs) {
$scope.items = [{
name: "One",
tester: true
}, {
name: "Two",
tester: false
}, {
name: "Three",
tester: true
}, {
name: "Four",
tester: false
}, {
name: "Five",
tester: true
}, {
name: "Six",
tester: false
}, ];
$scope.filterText = 'o';
$scope.filterSwitchOn = true;
});
You can easily adapt this idea to your filter. Hope it helps.
source to share