Wie erstellt man einen Checkbox-Filter für die ng-repeat-Liste mit angularjs?

Question

Ich versuche, Kontrollkästchen für ng-Wiederholungsliste zu erstellen. Ich habe einige Probleme.

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 ARRAY

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

1000 Rows

Die einfache Suche ng-model="findname" funktioniert gut, wenn ich das Kontrollkästchen Filter in der ng-Liste | filter:myFunc entfernen. Aber wenn ich beide in ng-list hinzufügen, dann funktioniert keine Daten in student Liste und auch Textsuche funktioniert nicht. Ich wollte beide benutzen.

Kann mir jemand sagen, wo ich falsch liege, dass ich mein Problem beheben kann. Ich würde es schätzen, wenn mich jemand führt. Danke.

Answer 1

Ich bin definitiv kein Fan von Filterfunktionen in Steuerungen. In diesem Sinne würde ich empfehlen, einen tatsächlichen Filter zu schreiben.

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>