如何在单击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-module value 应该在数据列表中过滤...

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; */
        });
    };
})

打工者：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 并在controller 中填写默认值以使其更好地工作。

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

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