角度和JS篩選非標準複選框行爲

Question

我想創建表格數據過濾器。

過濾器應該是通用的（一到多個過濾器組），並與搜索字段混合使用。我有數據，基本邏輯和搜索工作，但無法找到正確的方法來構造將返回過濾記錄的函數。所有篩選器都有ALL作爲選項，在onLoad期間檢查，但當您檢查篩選器選項ALL未選中時，剩餘複選框保持未選中狀態（客戶指定）。

HTML和JS代碼：

$scope.checkedAll = [true, true]; 
 
\t 
 
    $scope.data.items = [ 
 
\t \t {name: "Provider", value: 'provider_id', content: [ 
 
\t \t \t {name: 'Azure VM', value: 'azure_vm', selected: false}, 
 
\t \t \t {name: 'CloudForms', value: 'cloudforms', selected: false} 
 
\t \t \t // more providers of them... 
 
\t \t ]}, 
 
\t \t {name: "State", value: 'state_id', content: [ 
 
\t \t \t {name: 'Terminated', value: 'terminated', selected: false}, 
 
\t \t \t {name: 'On', value: 'on', selected: false}, 
 
\t \t \t {name: 'Off', value: 'off', selected: false} 
 
\t \t \t //more states 
 
\t \t ]} 
 
\t \t //more filters [] 
 
\t ]; 
 

 
    $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 
 
    ]; 
 

 
\t $scope.optionClickedAll = function(index) { 
 
\t \t var checked = $scope.checkedAll[index]; 
 
\t \t if (!checked) { 
 
\t \t \t return; 
 
\t \t } 
 
\t \t 
 
\t \t angular.forEach($scope.data.items[index].content, function (element) { 
 
\t \t \t element.selected = !checked; 
 
\t \t }); 
 
\t } 
 
\t 
 
\t $scope.optionClicked = function(index, element) { 
 
\t \t var checked = element.selected; 
 
\t \t 
 
\t \t if (checked) { 
 
\t \t \t $scope.checkedAll[index] = false; 
 
\t \t } 
 
\t \t 
 
\t } 
 
\t 
 
\t $scope.filterSelected = function(list) { 
 

 
\t \t var result = []; 
 
\t \t 
 
/* \t \t var filterIds = []; 
 
\t \t var itemIds = []; 
 
\t \t for (var i = 0; i < $scope.data.items.length; ++i) { 
 
\t \t \t var item = $scope.data.items[i]; 
 
\t \t \t for (var j = 0; j < item.content.length; ++j) { 
 
\t \t \t \t var value = item.content[j]; 
 
\t \t \t \t if ($scope.checkedAll[i] || value.selected) { 
 
\t \t \t \t \t if (filterIds.indexOf(item.value) == -1) filterIds.push(item.value); 
 
\t \t \t \t \t if (itemIds.indexOf(value.value) == -1) itemIds.push(value.value); 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t } 
 
*/ 
 

 
\t \t for (var k = 0; k < list.length; ++k) { 
 
\t \t \t // ... 
 
\t \t return result; 
 
\t } 
 
}

<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>

這有可能改變$scope.data.items結構。感謝任何建議。

Answer 1

角支持自定義過濾器，這可能是你想要的。看看AngularJS文檔Creating custom filters。你也會在那裏找到一個例子。