Angular - 使用复选框进行过滤答案

【问题标题】：Angular - Filtering with checkboxesAngular - 使用复选框进行过滤
【发布时间】：2013-08-25 13:26:24
【问题描述】：

我是 Angular 新手，我无法解决这个问题。

我有几个复选框，每个复选框都有一个唯一的值，如下所示：

<label ng-repeat="c in classes">
    <input type="checkbox"  ng-model="query" ng-true-value='{{c.name}}'>
    <span>{{c.name}}</span>
</label>

接下来我有这组 div，应该根据特定值（如 card.name）进行过滤，如下所示：

<div ng-repeat="card in cards | filter:query">
  <h2>{{card.name}}</h2>
  <p><em>{{card.text}}</em></p>
</div>

选中值为“Peter”的复选框时，将显示所有 card.name=Peter 的卡片。当显示复选框 'Peter' 和 'John' 时，会显示所有 card.name=Peter 和 =John 的卡片。我怎么能意识到这一点？

我猜它更像是一个一般概念/标记问题......

【问题讨论】：

问题是什么？
同意@Chandermani 的观点，这个问题尚不清楚，但从我对您的问题的猜测来看-this 问题和答案应该可以帮助您。欢迎使用 AngularJS！
对不起，我想我有更多的流派概念或标记问题。请参阅主要问题以进行进一步编辑...

标签： angularjs checkbox filter

【解决方案1】：

你不需要有两个不同的变量，事实上这就是问题所在。 Angular 不知道如何将它们联系在一起。

过滤器可以深入查看对象，将特定键设置为特定值。在我的示例中，过滤器会查找这个特定的 selected 属性，只显示设置为 true 的属性。将所有内容保留在同一个对象中，可以将所有内容联系在一起。

<label ng-repeat="c in classes">
    <input type="checkbox"  ng-model="c.selected" />
    <span>{{c.name}}</span>
</label>

<div ng-repeat="card in classes | filter:{selected:true}">
    <h2>{{card.name}}</h2>
    <p><em>{{card.text}}</em></p>
</div>

这是数据：

$scope.classes = [{
    name: "John",
    text: "Something about John"
},{
    name: "Peter",
    text: "Something about Peter"
}];

注意：selected 属性会在每个对象被选中时添加到它。这是我们过滤的关键。

工作示例：http://jsfiddle.net/TheSharpieOne/y2UW7/

更新：

重新阅读问题后，在我看来，同名会有多张卡片。需要一种不同的方法。

在这种情况下，需要多个变量，一个复选框列表和一个“卡片”列表。我们还需要一个 var 来跟踪选择了哪些框。

在这种情况下，我们使用一个函数来过滤列表，因为 1 个复选框可以更改许多“卡片”

示例：http://jsfiddle.net/TheSharpieOne/y2UW7/1/

【讨论】：