javascript - 搜索和复选框上的 Angular 过滤器

Question

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

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

我希望字符串根据名字/姓氏进行过滤，复选框根据状态进行过滤

Full Fiddle code

搜索过滤器的绑定(bind)方式如下:

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'}
    ];

Answer 1

此代码基于您的 fiddle ，与您在此处发布的代码略有不同。

首先，给你一个复选框模型:

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

其次，稍微改变一下你的过滤器:

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

最初active未定义，因此所有人员都会显示。一旦您选中active复选框，就会有一个值并进行相应的过滤。

Demo Fiddle