使用复选框和AngularJS过滤ng-repeat列表

Question

我已经阅读了很多其他文章，他们都倾向于描述独特复杂的解决方案。我只想根据点击的复选框筛选项目列表（我需要'AND'筛选器&能够在单击复选框之前查看所有项目）。

这似乎应该是AngularJS的一块蛋糕，但我只是没有得到它。我如何修改我的代码以使过滤工作？

这是我未完成的jsfiddle：http://jsfiddle.net/mromrell/qx3cD/1/

更新小提琴这里：http://jsfiddle.net/mromrell/qx3cD/7/

预先感谢您！

<div ng-controller="MyCtrl"> 
<li class="no-decoration" ng-repeat="tech in technologyArray"> 
    <label> 
     <input type="checkbox" ng-model="strict" />{{tech}}</label> 
</li> 
<hr> 
<div ng-repeat="portfolioItem in portfolioArray | filter:strict" class="ng-scope"> 
    <h3>{{portfolioItem.name}}</h3> 

</div> 

var myApp = angular.module('myApp', []); 

function MyCtrl($scope) { 
    $scope.technologyArray = ["HTML", "CSS", "Django", "Python", "AngularJS", "Javascript", "3rd party Payment API", "3rd party Libraries", "Jquery", "RestfulAPI", "AAAAAHH", "NodeJS", "Mongo", "Express", "Jade", "Wordpress", "MySQL", "Joomla", "Magento", "Jira"] 

$scope.portfolioArray = [{ 
    "id": "1", 
    "name": "Storm Pig", 
    "technology": ["HTML", "CSS", "Django", "Python", "AngularJS", "Javascript", "3rd party Payment API", "3rd party Libraries"] 
}, { 
    "id": "2", 
    "name": "Placer", 
    "technology": ["HTML", "CSS", "Django", "Python", "AngularJS", "Javascript", "Jquery"] 
}, { 
    "id": "3", 
    "name": "Custom Proposal App", 
    "technology": ["RestfulAPI", "AAAAAHH", "AngularJS", "HTML", "CSS", "Javascript", "NodeJS", "Mongo", "Express", "Jade"] 
}, { 
    "id": "4", 
    "name": "21 Zero", 
    "technology": ["HTML", "CSS", "Wordpress", "MySQL"] 
}, { 
    "id": "5", 
    "name": "Detour Journal", 
    "technology": ["HTML", "CSS", "Joomla", "MySQL"] 
}, { 
    "id": "6", 
    "name": "Dex Custom Websites", 
    "technology": ["HTML", "CSS", "Wordpress", "MySQL", "Magento", "Jira"] 
}, { 
    "id": "7", 
    "name": "Conversion Jump", 
    "technology": ["HTML", "CSS", "Joomla", "MySQL"] 
}, { 
    "id": "8", 
    "name": "The Canyons Pass", 
    "technology": ["HTML", "CSS", "Joomla", "MySQL"] 
}] 

}

Answer 1

我觉得我已经在一个相当简单的方式解决了这个问题：http://jsfiddle.net/qx3cD/4/

您遇到的问题是，复选框上的真/假工作价值体系，而一个基本的过滤器正在寻找到匹配数据。所以你需要创建一些自定义过滤器来将复选框状态映射到数据本身。我使用了这个基本功能，它将复选框状态与其相应的名称进行比较，以及它们是否与技术列表相关联。

$scope.myFunc = function(a) { 
    for(tech in $scope.technologyArray){ 
     var t = $scope.technologyArray[tech]; 
     if(t.on && a.technology.indexOf(t.name) > -1){ 
      return true; 
     }    
    } 
}; 

编辑：更新

我已经更新这里的小提琴：http://jsfiddle.net/qx3cD/9/

基本上两件事情都做了。首先是用ng-change观察复选框，以便在没有选中复选框时显示所有结果。第二个是过滤器功能被更新为仅显示包含所选技术的所有的项目。