Angular和JS过滤非标准复选框行为

Question

I would like create filters upon table data.

Filter should be generic (one to many filters group) and is mixed with search field. I have data, basic logic and search working, but can not find the right way to construct function which will return filtered records. All the filters have ALL as option, it's checked during onLoad , but rest checkboxes remains unchecked (customer specification), when you check one of the filter option the ALL is unchecked.

HTML and JS code:

 $scope.checkedAll = [true, true]; $scope.data.items = [ {name: "Provider", value: 'provider_id', content: [ {name: 'Azure VM', value: 'azure_vm', selected: false}, {name: 'CloudForms', value: 'cloudforms', selected: false} // more providers of them... ]}, {name: "State", value: 'state_id', content: [ {name: 'Terminated', value: 'terminated', selected: false}, {name: 'On', value: 'on', selected: false}, {name: 'Off', value: 'off', selected: false} //more states ]} //more filters [] ]; $scope.data.list = [ {provider_id: "provider1", display_name: "name1", state_id: "on"}, {provider_id: "provider2", display_name: "name2", state_id: "on"}, {provider_id: "provider2", display_name: "name3", state_id: "off"}, {provider_id: "provider2", display_name: "name4", state_id: "terminated"} //much more records ]; $scope.optionClickedAll = function(index) { var checked = $scope.checkedAll[index]; if (!checked) { return; } angular.forEach($scope.data.items[index].content, function (element) { element.selected = !checked; }); } $scope.optionClicked = function(index, element) { var checked = element.selected; if (checked) { $scope.checkedAll[index] = false; } } $scope.filterSelected = function(list) { var result = []; /* var filterIds = []; var itemIds = []; for (var i = 0; i < $scope.data.items.length; ++i) { var item = $scope.data.items[i]; for (var j = 0; j < item.content.length; ++j) { var value = item.content[j]; if ($scope.checkedAll[i] || value.selected) { if (filterIds.indexOf(item.value) == -1) filterIds.push(item.value); if (itemIds.indexOf(value.value) == -1) itemIds.push(value.value); } } } */ for (var k = 0; k < list.length; ++k) { // ... return result; } } 

 <div class="col-md-2 "> <div class="filters"> <div class="search-box"> <label class="filter-label">FILTERS</label> <div class="input-field"> <input type="text" ng-model="searchInstances"> <label class="">${Search}</label> </div> </div> <div ng-repeat="item in data.items"> <label>{{item.name|uppercase}}</label> <div class="checkbox-group"> <input type="checkbox" ng-click="optionClickedAll($index)" ng-model="checkedAll[$index]" id="{{item.value}}"> <label for="{{item.value}}">All</label> <div ng-init="parentIndex = $index"> <div ng-repeat="element in item.content"> <input class="filled-in filter-all" type="checkbox" ng-click="optionClicked(parentIndex, element)" ng-model="element.selected" id="{{element.value}}"> <label for="{{element.value}}">{{element.name}}</label> </div> </div> </div> </div> </div> <div class="col-md-10 "> <table class="table"> <thead> <tr> <th>Provider</th> <th>State</th> <th>Name</th> </tr> </thead> <tbody> <tr ng-repeat="item in filterSelected(data.list) | filter:searchInstances"> <td>{{item.provider_id}}</td> <td>{{item.state_id}}</td> <td>{{item.display_namy}}</td> </tr> </table> </div> 

It's possible to change structure of $scope.data.items . Appreciate any suggestions.

Answer 1

Angular supports custom filter which is probably what you want. Take a look at the AngularJS documentation Creating custom filters . You will also find an example there.