비표준 체크 상자 동작시 Angular 및 JS 필터

Question

테이블 데이터에 필터를 작성하고 싶습니다.

필터는 일반적이어야하며 (1 대 다수 필터 그룹) 검색 필드와 섞여 있어야합니다. 데이터, 기본 논리 및 검색 작업이 있지만 필터링 된 레코드를 반환하는 함수를 생성하는 올바른 방법을 찾을 수 없습니다. 모든 필터의 옵션이 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을 살펴보십시오. 거기에 예제가 있습니다.