Question

我的应用程序使用的是Bootstrap 3和AngularJS。

我正在尝试添加一个多选过滤器，这样我只能查看我在ng-repeat上选择的所选项目。例如，这里是我正在提取的一个小型JSON数据样本：

[
    {
        "MarketName": "Farm1",
        "Bakedgoods" :"N",
        "Cheese":"Y",
        "Eggs":"N"
    },
    {
        "MarketName": "Farm2",
        "Bakedgoods" :"N",
        "Cheese":"Y",
        "Eggs":"N"
    },
    {
        "MarketName": "Farm3",
        "Bakedgoods" :"Y",
        "Cheese":"Y",
        "Eggs":"N"
    }
]

如果我检查了Baked Goods，我只会看到在ng-repeat上显示Farm3。

如果我检查了奶酪，我会看到在ng-repeat上显示Farm1，Farm2和Farm3。

如果我检查了Baked Goods 和 Cheese，我只会看到在ng-repeat上显示Farm3。

Answer 1

您需要使用searchkey来定义对象值。

像这样：

<input type="checkbox" ng-model="SearchKey.Bakedgoods" ng-true-value="Y" ng-false-value="N"/>
<input type="checkbox" ng-model="SearchKey.Cheese" ng-true-value="Y" ng-false-value="N"/>

<div ng-repeat="farm in farms | filter:SearchKey">
  {{farm.MarketName}}
</div>

http://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D

Answer 2

我认为你需要这样的东西：

小提琴：http://jsfiddle.net/mwrLc/70/

代码：

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

function MyCtrl($scope) {
  $scope.trueFalse = [
    {
        "Eggs":"N"
    },
    {
        "Eggs":"Y"
    }
    ];

  $scope.trueFalseForBakedGoods = [
    {
        "Bakedgoods":"N"
    },
    {
        "Bakedgoods":"Y"
    }
    ];

  $scope.list = [
    {
        "MarketName": "Farm1",
        "Bakedgoods" :"N",
        "Cheese":"Y",
        "Eggs":"N"
    },
    {
        "MarketName": "Farm2",
        "Bakedgoods" :"N",
        "Cheese":"Y",
        "Eggs":"N"
    },
    {
        "MarketName": "Farm3",
        "Bakedgoods" :"Y",
        "Cheese":"Y",
        "Eggs":"N"
    }
    ];

    $scope.$watch('searchBakedGoods', function() {
        $scope.searchEggs = null;
    });

}

Answer 3

使用范围函数作为ngRepeat中的数据源。范围函数将检查绑定到复选框的范围变量并过滤掉一些项目。

Answer 4

我相信这就是你所需要的： http://plnkr.co/edit/F5K6BkJvGny2fuLLuPCm?p=preview

如何在ng-repeat上添加多选复选框过滤器？

4 个答案: