I am using AngularJS and I have a table of items that I want to be able to display based on their color. For example, if I click on the "SHOW GREEN" and "SHOW RED" checkboxes, the table will show only the items that are green or red.
This is the item object:
{"name":"Fire Truck", "color":"red"}
Here are my checkboxes, which when clicked will evaluate to TRUE or FALSE:
<select id="item_color" ng-model='color'>
<option value='green'>SHOW GREEN</option>
<option value='red'>SHOW RED</option>
<option value='blue'>SHOW BLUE</option>
</select>
And here is my table:
<tr ng-repeat="item in items" ng-hide='???'>
<td>{{item.name}} </td>
<td>{{item.color}} </td>
</tr>
So how can I have my table dynamically show the desired items? The ideal solution would also allow me to list 3 seperate tables for all items of each color. I am little stumped on how to go about this. Any ideas?
<tr ng-repeat="item in items" ng-hide='item.color !== color'>
<td>{{item.name}} </td>
<td>{{item.color}} </td>
</tr>
It's that simple. Alternatively, use ng-if
to not stamp out the inverse at all:
<tr ng-repeat="item in items" ng-if='item.color === color'>
<td>{{item.name}} </td>
<td>{{item.color}} </td>
</tr>
Thank you to Antiga for his solution. I went for something similar using a controller function inside ng-hide. This works for 3+ conditions.
<!-- Checkboxes to toggle T/F which colors to show -->
<input type='checkbox' id='full' ng-model='toggle_red'>RED
<input type='checkbox' id='part' ng-model='toggle_green'>GREEN
<input type='checkbox' id='former' ng-model='toggle_blue'>BLUE
<!-- ng-hide will show item if color_hider() evals to false -->
<tr ng-repeat="item in items" ng-hide='color_hider(item.color)'>
<td>{{item.name}} </td>
<td>{{item.color}} </td>
</tr>
<script>
// variables for the toggles
$scope.toggle_red = true;
$scope.toggle_green = true;
$scope.toggle_blue = true;
// evals to false for each color if both conditions are true
$scope.color_hider(color){
if(color == 'red' && $scope.toggle_red === true){
return false;
}else if(color == 'green' && $scope.toggle_green === true){
return false;
}else if(color == 'blue' && $scope.toggle_blue === true){
return false;
}else{
return true;
};
};
</script>
Rather than ng-repeating over the entire collection and then hiding individual elements, it might be better to filter the ng-repeat
itself:
<tr ng-repeat="item in items | filter:{'color': 'green'}">
will ng-repeat over all items whose color is green.
(For more complex conditions you can use a function as a filter instead: https://docs.angularjs.org/api/ng/filter/filter )
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.