如何使用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-model="findname"工作正常，當我刪除ng-list | 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>