如何在过滤器AngularJS中使用OR

Question

选择一个选择选项时，我有一个无序列表正在被过滤。 我的问题是，当选择“全部”时，什么都不显示，因为该值与我的任何列表项的item.status不匹配。 有没有添加|| 然后将过滤item.status或“ ALL”？

以下是所选中的值。 每个列表项还将这些值之一作为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 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 （即选择框的模型）初始化为4个值之一（即初始化为'' （如果必须将选项All设为预选）

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