如何在过滤器中使用 OR AngularJS

Question

我有一个无序列表，当 select 选项被 selected 时，该列表将被过滤。我的问题是，当 'ALL' 被 select 编辑时，没有任何显示，因为该值与我的任何列表项的 item.status 不匹配。有没有办法添加 || 然后过滤 item.status 或 'ALL'?

以下是 select 中的值。这些值之一也被每个列表项引用为 item.status

app.value('filterSavedList', pageOptions = [
    {
        value: 'ALL',
        label: 'All'
    },
    {
        value: 'NEW',
        label: 'Not started'
    },
    {
        value: 'STARTED',
        label: 'In progress'
    },
    {
        value: 'COMPLETED',
        label: 'Completed'
    }
]);

我的 select 和我的无序列表。

    <select ng-model="filter" ng-options="item.value as item.label for item in status">
    </select>

<ul>
    <li ng-repeat="item in assignments | filter: { status : filter }">
       //do stuff                     
    </li>
</ul>

Answer 1

您还可以创建一个自定义过滤器，通过属性进行正常过滤，并处理 status 中的 ALL 可能性：

.filter('filterStatus', function () {
    return function (items, status) {
        if(status === 'ALL') {
            return items;
        }
        else {
            var itemsToReturn = [];
            for(var i=0,x=items.length;i<x;i++) {
                if(items[i].status === status) {
                    itemsToReturn.push(items[i]);
                }
            }
            return itemsToReturn;
        }
    };
});

然后在HTML:

<ul>
    <li ng-repeat="item in assignments | filterStatus: filter">
        <!-- do stuff -->                     
    </li>
</ul>

Answer 2

您只需将状态值设置为 ''（空字符串），并确保 filter（即 select 框的模型）初始化为以下之一4 个值（即初始化为 ''，如果选项 All 必须预先 selected）

有关完整示例，请参阅 http://plnkr.co/edit/mJtQnwA3aQhpT4WN62jj?p=preview。

如何在过滤器中使用 OR AngularJS

How to use an OR in a filter AngularJS

filter

angularjs

ng-options