Question

大家好，我只想点击复选框字段来过滤ng-repeat值。
My Plunker
点击Role block复选框后，它应仅过滤roles value of block元素。
点击My role复选框后，它应仅过滤request_role value 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

您可以这样做：

<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

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

Answer 2

更灵活的解决方案是为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

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

2 个答案: