使用过滤器filter在ngOptions和ngRepeat中筛选与排除

撰写于 2015年3月3日 修改于 2021年3月11日 分类 编程杂记 标签 AngularJS / JavaScript views

ngRepeat 和 ngOptions 中经常会涉及到特定值的筛选和排除，但在排除值的时候，与最直观的想法有点儿不一样，尝试了几次，最后是查了官方的 filter 文档，才找到正确的写法。干脆搬运一下。

下面代码中所使用的数组结构如下：

1
2
3
4
5
6
7
8

$scope.newsCategories = [
  {name: 'hotNews', showName: '热门新闻'}
  , {name: 'health', showName: '健康知识'}
  , {name: 'feeling', showName: '情感生活'}
  , {name: 'video', showName: '视频'}
  , {name: 'humNews', showName: '幽默新闻'}
  , {name: 'lecture', showName: '学堂'}
]

过滤器的基本运算符

简单筛选

过滤出所有包含某个字符串的对应元素，注意，如果元素有多层，只要任何一层中有值满足即可，写法如下

1

filter: "o"

上面便可以筛选出所有包含o的元素，不管是name属性中包含o，还是showName中包含o，它其实是下面这种写法的简写：

1

filter: {$: "o"}

简单排除

排除的写法有点怪异，是直接将排除操作符写到引号之内，如下：

1

filter: "!o"

它的完整写法是：

1

filter: {$: "!o"}

单个属性过滤

筛选的时候，也可以指定单个属性，如下：

1

filter: {name: "o"};

多个属性过滤

筛选可以指定多个属性，筛选同时满足多个属性条件的值：

1

filter: {name: "o", showName: "!新闻"};

这其实相当于是AND，filter不支持直接进行OR类似的筛选，必须通过自定义的过滤器才能完成。

在ngRepeat中使用过滤器

以上面的多属性过滤为例，可以这样使用：

1
2
3

<li ng-repeat='c in newsCategories | filter: {name: "o", showName: "!新闻"}'>
  {{c.name}}
</li>

在ngOptions中使用过滤器

直接在ngOptions的as和for语句后追加过滤器，如下：

1
2
3
4
5

<select 
  class="form-control" 
  ng-model='news.filter.category' 
  ng-options='c.name as c.showName for c in newsCategories | filter: {name: "o", showName: "!新闻"}' 
  ng-change='news.changeCategory()'></select>

在网上搜索了一下这个话题，其实写的人很多了，不过还是决定写下来。