angularjs多选框过滤

Question

我想筛选多个复选框，但我只能一次选择一个。不知道如何构造这个，所以我可以过滤所有的值。

我创建了一个fiddle，任何帮助表示赞赏。

<input type="checkbox" id="cb" ng-model="word" ng-true-value="has kitchen" ng-false-value=""> 

吉米

Answer 1

的主要问题与不能够同时选择两个复选框是因为它们都绑定到相同的模型属性。

如前所述，你有过滤器的其他声明性问题，但我认为创建一个自定义过滤器可能无论如何是为你的需要矫枉过正。

我的做法是创建的单独地跟踪每个选择一组选项：

$scope.options = [ 
    { 
    name: 'has kitchen', 
    selected: false 
    }, { 
    name: 'has bakery', 
    selected: false 
    }]; 

，并在它们之间迭代，以建立自己的复选框

<label ng-repeat="option in options"> 
    <input type="checkbox" ng-model="option.selected"/>{{option.name}} 
</label> 

然后让事情更加清楚一点（并避免一些不必要的嵌套），我们可以简化你正在使用的模型到这个

$scope.data = [{ 
    "name" : "one", 
    "services" : ["has bakery", "has dispensary"], 
    "address" : "21 regent st chippendale" 
    },{ 
    "name" : "two", 
    "services" : ["has bakery", "has dispensary", "has food hall", "has kitchen"], 
    "address" : "25 regent st chippendale" 
    },{ 
    "name" : "three", 
    "services" : ["has food hall", "has kitchen"], 
    "address" : "25 regent st chippendale" 
    }]; 

您可以使用一个简单的控制器功能提供

<ul> 
    <li ng-repeat="item in data | filter:itemFilter">{{item.name}}</li> 
</ul> 

的过滤功能得到每个项目调用一次，如果该项目已全部选定的选项返回true，否则为false过滤。

$scope.itemFilter = function(item) { 
    var filters = $scope.options.filter(function(element, idx, array) { 
     return element.selected; 
    }) || []; 

    var matched = true; 
    filters.forEach(function(option) { 
     matched = matched && item.services.indexOf(option.name) >=0; 
    }) 
    return matched; 
    }; 

诚然，这是匹配的逻辑的简化版本（与常规EXP东西删除），但它应该表现出的机制，然后你可以从那里如果。

这里的工作示例http://plnkr.co/edit/nyBqQAHx8VgbNFICZMou

编辑

这里的另一个版本，应该与原来的JSON模式

<ul> 
    <li ng-repeat="item in data.list | filter:itemFilter">{{item.name}}</li> 
</ul> 

和新的过滤器功能（不是真的做工考究，但似乎为我试过的情况工作）

$scope.itemFilter = function(item) { 
    var filters = $scope.options.filter(function(element, idx, array) { 
     return element.selected; 
    }) || []; 

    var matched = true; 
    filters.forEach(function(option) { 
     var matchingService = item.services[0].services.filter(function(element, idx, array) { 
     return element.serviceName == option.name; 
     }) || []; 
     matched = matched && matchingService.length > 0; 
    }); 

    return matched; 
    }; 

更新示例http://plnkr.co/edit/Wlk5wQdXS7OZhSNxhqOA