0

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

当检查带有值“彼得”的复选框时，显示了所有带有卡的卡。名称=彼得。当显示复选框“彼得”和“约翰”时，将显示所有带有 card.name=Peter 和 =John 的卡片。我怎么能意识到这一点？

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

4

1 回答 1

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/

于 2013-08-26T04:11:42.693 回答