使用复选框和 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 监视复选框，以便在未选中任何复选框时显示所有结果。第二个是过滤器功能已更新为仅显示包含所有所选技术的项目。