AngularJS通过数组过滤ng-repeat

Question

因此，我拥有HVAC业务的JSON数据，并且我想通过使用HTML复选框的认证数组来过滤它们。下面的代码是一个简单的版本就是我与|filter工作和ng-model去除

angular.module("list",[]) 
 
\t .controller("listController",[listCtrlFun]) 
 

 
function listCtrlFun(){ 
 
this.businesses = [ 
 
    { 
 
    "name": "HotCold", 
 
    "certifications": ["Residential","Installation"] 
 
    },{ 
 
    "name": "MegaCorp", 
 
    "certifications": ["Commercial","Installation"] 
 
    }]; 
 
    
 
}

<div ng-app="list" ng-controller="listController as vm"> 
 
<div> 
 
<label> 
 
    <input type="checkbox" /> 
 
\t \t \t Residential 
 
</label> 
 
    <label> 
 
    <input type="checkbox" /> 
 
\t \t \t Commercial 
 
</label> 
 
    <label> 
 
    <input type="checkbox" /> 
 
\t \t \t Installation 
 
</label> 
 
</div> 
 

 
<div ng-repeat="business in vm.businesses"> 
 
    <p>{{business.name}}</p> 
 
</div> 
 
</div>

的目标是如此，当有人检查安装企业都出现了，如果他们检查商业和只安装一个将出现。我不确定如何绑定复选框中的值，以便可以将这些值与数据进行交叉引用。我试过这样的东西... this.types = {Residential: true, Commercial: true, Installation: true} here当我将它们绑定到复选框时，我可以获取更改的值。仍然我不确定如何交叉引用真/假值与数据

Answer 1

在复选框上使用ng-model，如果选中，则设置为true，否则设置为false。然后，你可以简单地传递一个函数来过滤返回true，如果企业的一个认证实际上是检查：

$scope.filterBy = function() { 
    return function(e) { 
    return e.certifications.some(v => $scope.options[v]); 
    } 
} 

$scope.options = { 
    Installation: true, 
    Residential: true, 
    Commercial: true 
} 

有了这个网站

<div> 
<label> 
    <input type="checkbox" ng-model="options.Residential"/> 
      Residential 
</label> 
    <label> 
    <input type="checkbox" ng-model="options.Commercial" /> 
      Commercial 
</label> 
    <label> 
    <input type="checkbox" ng-model="options.Installation"/> 
      Installation 
</label> 
</div> 

<div ng-repeat="business in businesses | filter:filterBy(business)"> 
    <p>{{business.name}}</p> 
</div> 

Here's a plunkr