angularjs多个复选框过滤

Question

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

我创建了一个小提琴 ，感谢您的帮助。

<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