Html 如何在angularjs中单击复选框字段时过滤ng重复值？

您好，我只想在点击复选框字段时过滤

ng repeat

值

单击

角色块

复选框时，应仅过滤块元素的

角色

值

点击

我的角色

复选框，它应该只过滤

请求_角色

变更代理数据或元素的值

我的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"
},
    ]

---

*我正在查看的是，单击复选框时，

ng模块

值应在数据列表中进行筛选。
您可以通过以下方式执行此操作：

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

角色块
我的角色
{{question.displayName}}
，{{问题.角色[0]}
，{{question.request_role[0]}

您必须声明
$scope.filters
并在
控制器中填充默认值以使其更好地工作

示例：

另一个解决方案是创建角度自定义过滤器
更灵活的解决方案是为您的
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">

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

自定义过滤器：

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

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

正在工作的Plunker：
@karol感谢您宝贵的回答。如果可能，请更新我的Plunker，以了解确切的解决方案thanks@karol感谢您的回答您的代码在我的门户中不起作用，我已经找到了答案，我刚刚改变了输入
checkbox
而不是
radio
这对我来说非常有效谢谢…非常感谢你的帮助…你可以从演示中看到，上面的答案也适用于checkbox。是的，我看到了你的答案这对我也很有用谢谢，我给你投票…谢谢。。。。如果可能，请看以下内容：-