如何在angularjs中点击复选框字段时过滤ng-repeat值？

Question

• 嗨，我想过滤ng-repeat价值点击复选框字段。

• My Plunker。

• 点击Role block复选框，它应该只过滤rolesvalue of block元素。

• 并就My role复选框，单击它应该过滤只有request_rolevalue of Change agent data's or elements

我的HTML： -

<div ng-repeat="question in users | filter: searchtable | filter: myrole"> 
      <small> 
       <table border="0"> 
       <tbody> 
        <th>{{question.displayName}}</th> 
       <th style="background: yellow;">,{{question.roles[0]}}</th> 
       <th style="background: light;">,{{question.request_role[0]}}</th> 

       </tbody> 
         </table> 


       </small> 
     </div> 

复选框滤波器输入： -

<input type="checkbox" data-ng-model="searchtable.roles" value="block" ><span>Role block</span> 

     <input type="checkbox" data-ng-model="myrole.request_role" value="Change Agent" ><span>My role</span> 

我的数据： -

$scope.users = [{ 
"_id": "59a6c7c96c2ce324124cc1d8", 
"displayName": "blink foundation", 
"provider": "local", 
"location": "icf", 
"username": "blink", 
"dob": "1991-10-04T18:30:00.000Z", 
"phone": 7299345250, 
"religion": "Hindu", 
"college_name": "Arignar Anna", 
"__v": 2, 
"created": "2017-08-30T14:12:25.397Z", 
"roles": [ 
"block" 
], 
"request_role": [ 
"Change Agent" 
], 
"lastName": "foundation", 
"firstName": "blink" 
}, 
{ 
"_id": "598abfe4cce8ed582a2d8b32", 
"displayName": "avinaash muthukumar", 
"provider": "local", 
"username": "avinaash muthu", 
"__v": 0, 
"created": "2017-08-09T07:55:16.511Z", 
"roles": [ 
"admin" 
], 
"request_role": [], 
"firstName": "avinaash" 
}, 
{ 
"_id": "5979a591c999e9302caece13", 
"displayName": "Ajmal Afthab", 
"provider": "local", 
"location": "Urapakkam", 
"username": "ajmal_afthab", 
"dob": "1995-01-23T18:30:00.000Z", 
"phone": 9500269131, 
"religion": "Islam", 
"__v": 1, 
"roles": [ 
"kp" 
], 
"request_role": [], 
"categories": [ 
"Religion & Culture", 
"Moral Ethics", 
"Social Psychology" 
], 
"lastName": "Afthab", 
"firstName": "Ajmal" 
}, 
{ 
"_id": "5978a2886d5b10ec321a2114", 
"displayName": "happy selvam", 
"provider": "local", 
"username": "happy", 
"__v": 0, 
"created": "2017-07-26T14:09:12.730Z", 
"roles": [ 
"admin" 
], 
"request_role": [], 
"categories": [], 
"lastName": "selvam", 
"firstName": "happy" 
}, 
{ 
"_id": "58e73c5c9e2f3f1421e241be", 
"displayName": "sarawana kumar", 
"religion": "hindu", 
"__v": 2, 
"roles": [ 
"user" 
], 
"request_role": [], 
"categories": [ 
"Religion & Culture", 
"Social Psychology" 
], 
"lastName": "kumar", 
"firstName": "sarawana" 
}, 
{ 
"_id": "58d0fab62758cc482c295eba", 
"displayName": "avinaash kumaran", 
"provider": "local", 
"username": "avinaash", 
"roles": [ 
"admin" 
], 
"request_role": [], 
"categories": [], 
"lastName": "kumaran", 
"firstName": "avinaash" 
}, 
    ] 

* My Plunker我正好找上点击复选框ng-modulevalue应该在数据的列表中筛选...

Answer 1

更灵活的解决方案将为您的ng-repeat创建自定义过滤器。复选框中的值将被推送到数组中，并将根据这些值进行过滤。该过滤器非常灵活，您可以添加更多密钥进行过滤。

HTML：

<input type="checkbox" data-ng-model="searchtable.roles" value="block" ng-change="selectVal('block')"><span>Role block</span> 
<input type="checkbox" data-ng-model="myrole.request_role" value="Change Agent" ng-change="selectVal('Change Agent')"><span>My role</span> 
<div ng-repeat="question in users| selectedTags:filterval"> 

JS：

$scope.filterval = []; 
$scope.selectVal = function(val) { 
    var index = $scope.filterval.indexOf(val); 
    if (index > -1) $scope.filterval.splice(index, 1); 
    else $scope.filterval.push(val); 
} 

自定义筛选：

app.filter('selectedTags', function() { 
    return function(users, filterval) { 
     if (filterval.length == 0) { 
      return users; 
     } 
     var tempArr = []; 
     angular.forEach(users, function(key, val) { 
      tempArr.push(key); 
     }); 
     return tempArr.filter(function(value) { 
      //function to create filter for dynamic keys 
      function filterValue(parameter) { 
        for (var i in value[parameter]) { 
         if (filterval.indexOf(value[parameter][i]) != -1) { 
          return true; 
         } 
        } 
       } 
       //pass any key you want in your object 
       //If you want your object to be filtered based on either of the key 
      if (filterValue('roles') || filterValue('request_role')) { 
       return true; 
      } else return false; 
      //If you want your object to be filtered based on both of the key    
      /*   if(filterValue('roles') && filterValue('request_role')) { 
          return true; 
         } 
         else 
          return false; */ 
     }); 
    }; 
}) 

Working Plunker：http://plnkr.co/edit/XeFk0wn43IycRcOG0Arn?p=preview

Answer 2

您可以在此做方法：

<input type="checkbox" ng-true-value="admin" ng-false-value="" data-ng-model="filters.roles" ><span>Role block</span> 
<input type="checkbox" ng-true-value="Change Agent" ng-false-value="" data-ng-model="filters.requestRoles" value="Change Agent" ><span>My role</span> 

<div ng-repeat="question in users | filter:{roles: filters.roles, request_role:filters.requestRoles}"> 
    <table border="0"> 
     <tbody> 
      <th>{{question.displayName}}</th> 
      <th style="background: yellow;">,{{question.roles[0]}}</th> 
      <th style="background: light;">,{{question.request_role[0]}}</th> 
     </tbody> 
    </table> 
</div> 

您必须声明$scope.filters，并在0123缺省值填写，使其更好地工作。

实施例：http://plnkr.co/edit/JMiSiIWf7B78rDtxws4R?p=preview

其他解决方案是创建角自定义过滤器。