复杂的过滤器不起作用

Question

我有一个列表，在该列表的顶部有一个带有搜索收音机的页面：

  <div class="btn-group" bs-buttons-radio ng-model="filter">
    <button type="button" value="all" class="btn span4">All</button>
    <button type="button" value="active" class="btn span4">Active</button>
    <button type="button" value="inactive" class="btn span4">Inactive</button>
  </div>

<div ng-repeat="u in (filteredUsers = (users | orderBy:'username' | offset: page*itemsPerPage | limitTo:itemsPerPage))" >
  <div>{{u.username}}</div>
</div>

我的用户对象如下所示：

{
  username: 'username',
  active: true
}

当过滤活跃与不活跃时，我会做这样的事情：

<div ng-repeat="u in (filteredUsers = (users | filter:{active: filter} | orderBy:'username' | offset: page*itemsPerPage | limitTo:itemsPerPage))" >
  <div>{{u.username}}</div>
</div>

效果很好。

将 'all' 加入其中会使事情变得有点复杂。

有没有一种方法可以在 html 中应用过滤器，这样 'all' 就会给我活跃和不活跃的用户？

Answer 1

自定义过滤功能如何？

$scope.filterActive = function (user) {
    switch ($scope.filter) {
        case 'all': return true;
        case 'active': return user.active;
        case 'inactive': return !user.active;
    }
}

那么你可以使用：

users | filter:filterActive ....

您在示例中使用的对象语法只有在将值与值进行匹配时才真正有意义。正如 New Dev 的回答所示，可以合并 "all" 逻辑，但不是很干净。

Answer 2

我同意@JLRishe 的回答，为了可读性，最好编写自定义过滤器函数，但为了完整性，实际上可以将其编写为过滤器表达式。

您的 "all" 只是意味着您的过滤器不应适用。为了使这项工作有效，您的过滤器表达式应该 return undefined 对于 "all" 的情况（从而使过滤器无效），对于其他情况应 {active: filter} ：

<div ng-repeat="u in users | filter: (filter != 'all' || undefined) && {active: filter}">
</div>

（我在这里假设 filter 可以假设 true | false | "all" 的值）

plunker

复杂的过滤器不起作用

Complex filter not working

angularjs

angularjs-filter