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>

对每个项目调用一次filter函数，如果该项目包含所有选定的选项，则返回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

angularjs多个复选框过滤

1 个答案: