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

我的应用程序使用Bootstrap3和AngularJS

我正在尝试添加一个multiselect筛选器，该筛选器允许我仅查看在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"
    }
]

如果我检查烘焙食品，我只会在ng repeat上看到Farm3

如果我检查奶酪，我会在ng repeat上看到Farm1、Farm2和Farm3

---

如果我选中烘焙食品和奶酪，我只会在ng repeat上看到Farm3显示。

您需要一个搜索键来定义对象值

像这样：

<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>

{{farm.MarketName}

---

我想你需要这样的东西：

小提琴：

代码：

---

}

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

我相信这就是你需要的：

---

只需修改非布尔值的过滤器​​, 但是用一根绳子。我认为这并不难。这是一个在Market对象中使用字符串值的例子，就像在您的代码中一样：非常感谢您的帮助。我将使用康斯坦丁·克拉斯的方法，因为它非常简单！！在初始化时，此方法具有错误的行为。在所有可见元素的开头，但在选择和取消选择复选框后，不会显示任何元素。Oledje是正确的。如果未选中复选框，则必须设置ng false value=“”以显示所有元素

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;
    });