Filter by checkbox
HTML
<div ng-app="myApp">
<div ng-controller="MyController">
<ul>
<li ng-repeat="choice in choices track by $index">
<label>
<input type="checkbox" ng-model="choices[$index].checked"/> {{choice.value}}
</label>
</li>
</ul>
<table width="80%" border="1">
<tr>
<th>Item</th>
<th>Color</th>
<th>Quantity</th>
</tr>
<tr ng-repeat="item in items" ng-show="isSelected(item.color)">
<td ng-bind="item.description"></td>
<td ng-bind="item.color"></td>
<td ng-bind="item.qty"></td>
</tr>
</table>
</div>
</div>
JavaScript
var myApp = angular.module('myApp', []);
myApp.controller('MyController', function($scope, $filter) {
$scope.choices = [{
value: 'red'
},
{
value: 'yellow'
},
{
value: 'silver'
},
{
value: 'white'
},
{
value: 'gold'
}
];
$scope.items = [{
description: "table",
color: "red",
qty: 10
},
{
description: "chair",
color: "blue",
qty: 6
},
{
description: "tablespoon",
color: "silver",
qty: 5
},
{
description: "glass",
color: "yellow",
qty: 3
},
{
description: "plate",
color: "white",
qty: 2
},
{
description: "knife",
color: "silver",
qty: 4
},
{
description: "napkin",
color: "white",
qty: 9
},
{
description: "napkin",
color: "yellow",
qty: 3
},
{
description: "teaspoon",
color: "gold",
qty: 4
},
{
description: "platemat",
color: "red",
qty: 2
},
{
description: "platemat",
color: "yellow",
qty: 1
},
{
description: "bottle",
color: "red",
qty: 10
},
{
description: "bottle",
color: "white",
qty: 8
},
{
description: "cup",
color: "gold",
qty: 7
},
{
description: "cup",
color: "silver",
qty: 10
},
{
description: "cup",
color: "white",
qty: 5
}
]
$scope.isSelected = function(color) {
var filteredColor = $filter('filter')($scope.choices, {
value: color
}, true);
return filteredColor.length > 0 ? filteredColor[0].checked : false
}
});