Question

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

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

我正在尝试研究我正在接触它的方式是否可行，或者我只是需要编写自定义过滤器功能。

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

这是标记：

<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显然在幕后做了一些事情，因为它实际上阻止了我选择了两个框。

Answer 1

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

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

Angular JS。我试图使用复选框过滤一个简单的结果列表

1 个答案: