搜索和复选框上的角度过滤器

angular filter on search and checkbox

本文关键字：过滤器 复选框 搜索      更新时间：2023-09-26

我有一个角度应用程序，我在其中显示人员列表。我有一个输入，用于根据输入中的字符串过滤列表。

列表中的每个人还有一个status字符串。我在字符串过滤器旁边添加了一个复选框，但我不确定如何将其应用于我的过滤。

我希望字符串按名字/姓氏过滤，复选框按状态过滤

完整的小提琴代码

搜索筛选器绑定如下：

input type='text' ng-model='filterText'/>
<input type='checkbox'/> <!-- how do I get this to work -->
    <ul>
        <li ng-repeat='person in people | filter:filterText'>
            <span class=''>{{person.firstname}}</span>
            <span class=''>{{person.lastname}}</span> -
            <span class='color-oj'>{{person.status}}</span>
        </li>
    </ul>
$scope.people = [
        {firstname: 'abdul', lastname: 'ahmad', status: 'active'},
        {firstname: 'mahmud', lastname: 'samrai', status: 'active'},
        {firstname: 'gasser', lastname: 'badawi', status: 'inactive'},
        {firstname: 'ibtihaj', lastname: 'jasim', status: 'active'},
        {firstname: 'abudi', lastname: 'ahmad', status: 'inactive'},
        {firstname: 'ahmad', lastname: 'jasim', status: 'active'},
        {firstname: 'abdul', lastname: 'samrai', status: 'inactive'}
    ];

这段代码基于你的小提琴，与你在这里发布的内容略有不同。

首先，给你一个模型：

<input type='checkbox' ng-model='active'/>

其次，稍微改变你的过滤器：

<li ng-repeat='person in people | filter:filterText | filter:{isActive:active} '>

最初active未定义，因此显示所有人。选中该复选框后active将有一个值并相应地进行过滤。

演示小提琴

如果您有多个字段，则可以使用严格搜索。

<input type='checkbox' ng-model='search.isActive'/>
<input type='checkbox' ng-model='search.anotherField'/>

您创建一个对象，其字段名称与要过滤的对象上的字段匹配

<li ng-repeat='person in people | filter:filterText | filter:search:strict '>
相关文章：