Question

我是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的卡片。我怎么能意识到这一点？

我想这更像是一般概念/标记问题......

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

角度 - 使用复选框过滤

1 个答案: