Angular - 用复选框过滤

我是Angular的新手，我只是无法绕过这个问题。Angular - 用复选框过滤

我有几个复选框，这将有各自独特的价值，就像这样：

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

下一步我有这个组应该像card.name特定值进行过滤，像这样的div：

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

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

我猜它更多的是笼统的概念/标记问题...

来源

2013-08-25 deekay

问题是什么？ – Chandermani

同意@Chandermani这个问题不清楚，但从我能猜到你的问题 - [this]（http://stackoverflow.com/questions/16457809/filtering-by-multiple-checkboxes-in-angularjs）问题和答案应该帮助你。欢迎来到AngularJS！ –

对不起，我想我有更多的genreal概念或标记问题。进一步编辑查看主要问题... – deekay

你并不需要有两个不同的变量，其实这就是问题所在。 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/

UPDATE：

后重新阅读的问题，它似乎我将有多个卡相同的名称。需要一种不同的方法。

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

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

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

来源

2013-08-26 04:11:42 TheSharpieOne

非常感谢！那很简单比我现在使用的解决方案... – deekay

Angular - 用复选框过滤

回答

相关问题