1

我试图让我的用户使用复选框过滤我的结果数组。

我刚刚进入 Angular JS 框架工作，不太确定如何处理我的场景。

我正在尝试确定我正在做的事情是否可能以我接近它的方式进行，或者我是否只需要编写一个自定义过滤器函数。

我整理了一个简单的 jsfiddle 来说明我的问题。

http://jsfiddle.net/arkleyjoe/7jUp6/

这是标记：

<div ng-app="">
<div ng-init="friends = [{name:'John', phone:'555-1276'},
                       {name:'Mary', phone:'800-BIG-MARY'},
                       {name:'Mike', phone:'555-4321'},
                       {name:'Adam', phone:'555-5678'},
                       {name:'Julie', phone:'555-8765'}]"></div>Exclude Johns
<input ng-model="search.name" name="name" type="checkbox"
ng-true-value="!John" ng-false-value="">
<br>Exclude Adams
<input ng-model="search.name" name="name" type="checkbox"
ng-true-value="!Adam" ng-false-value="">
<br>
<table id="searchObjResults">
    <tr>
        <th>Name</th>
        <th>Phone</th>
        <tr>
            <tr ng-repeat="friend in friends | filter:search">
                <td>{{friend.name}}</td>
                <td>{{friend.phone}}</td>
                <tr>
</table>
</div>

在此示例中，我使用复选框从列表中过滤某些名称。如果我选择一个或另一个，它工作正常，但我想同时选择。Angular JS 显然在幕后做了一些事情，因为它实际上阻止了我选择两个框。

4

1 回答 1

1

search.name您正在尝试为两个复选框绑定一个属性，因此选中其中一个将覆盖另一个设置的值。如果要过滤两个复选框值，则需要将 ng-model 表达式分配给不同的模型属性。

您可以在控制器上创建一个方法并将其传递给filter表达式，该方法将为列表中的每个项目调用一次。如果函数返回 true，则将项目添加到最终结果中。您可以在此处编写自定义过滤器表达式。在此处查看过滤器文档

于 2013-03-09T11:21:51.000 回答