如何使用angularjs為ng-repeat列表創建復選框過濾器？

Question

我正在嘗試為ng-repeat列表創建復選框。 我遇到了一些問題。

的HTML

<input type="text" ng-model="findname" placeholder="Search Name"  />
<ul>
    <li class="no-decoration" ng-repeat="tech in technologyArray">
    <label>
        <input type="checkbox" ng-model="tech.on" />{{tech.u_proffession}}
    </label>
    {{tech.on}}
    </li>
</ul>
<ul>
    <li  ng-repeat="stu in students  | filter:findname | filter:myFunc ">                
        <strong>Name :{{stu.u_name}}</strong><br />
    </li>
</ul>

JS

var ngApp = angular.module('angapp',[]);
ngApp.controller('angCtrl',function($scope,$http){
    $scope.myFunc = function(a) {
    for(tech in $scope.technologyArray){
            var t = $scope.technologyArray[tech];
            if(t.on && a.technology.indexOf(t.u_proffession) > -1){
                return true;   
            }               
        }
    };
    $scope.technologyArray = [{ u_proffession: "developer", on: false}, {u_proffession:"driver", on:false}];
    $http.get("data.php").then(function(response) {
        $scope.students= response.data.records
    });
});

JSON數組

{"records":[{"u_name":"adrian","u_mail":"abc@gmail.net","u_proffession":"developer"},{...}]}

1000 Rows

當我刪除ng-list中的復選框過濾器時，簡單的搜索ng-model="findname"可以正常工作| filter:myFunc | filter:myFunc 。 但是，當我將它們都添加到ng-list則沒有數據顯示在student列表中，並且文本搜索也不起作用。 我想同時使用它們。

誰能指導我我錯了，我可以解決我的問題。 如果有人指導我，我將不勝感激。 謝謝。

Answer 1

我絕對不喜歡在控制器中添加過濾器功能。 因此，我建議編寫一個實際的過濾器。

 angular.module('app', []) .controller('ctrl', function($scope) { $scope.technologyArray = [{ u_proffession: "developer", on: false }, { u_proffession: "driver", on: false }]; $scope.students = [{ "u_name": "adrian", "u_mail": "abc@gmail.net", "u_proffession": "developer" }, { "u_name": "adam", "u_mail": "def@gmail.net", "u_proffession": "driver" }, { "u_name": "alex", "u_mail": "ghi@gmail.net", "u_proffession": "developer" }, { "u_name": "allen", "u_mail": "jkl@gmail.net", "u_proffession": "driver" }]; }) .filter('customFilter', function() { return function(input, techs) { if(!techs || techs.length === 0) return input; var out = []; angular.forEach(input, function(item) { angular.forEach(techs, function(tech) { if (item.u_proffession === tech.u_proffession) { out.push(item); } }); }); return out; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl"> <input type="text" ng-model="findname" placeholder="Search Name"> <ul> <li ng-repeat="tech in technologyArray"> <label> <input type="checkbox" ng-model="tech.on">{{tech.u_proffession}} </label> </li> </ul> <ul> <li ng-repeat="stu in students | filter:{u_name: findname} | customFilter:(technologyArray|filter:{on:true})"> <strong>Name :{{stu.u_name}}</strong> ({{stu.u_proffession}}) </li> </ul> </div>