过滤:filter

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

想要在一个列表里面找到包含特定内容的项目,可以使用 filter 这个过滤器,比如在这个电视剧列表里,找出包含 game 的列表项目 ... 我们也可以自己去定义比较的条件,比如找出评分大于 9 分的项目。

打开 index.html ... 在这个列表元素里面,我们可以继续应用过滤器 ... 用一个竖线 ... 加上一个叫 filter 的过滤器 ... 它的值可以是一个字符串,也可以是一个对象,如果是字符串的话,Angular 就会给我们找到包含这个字符串内容的列表项目 ...

这里我们先设置成 'game' ... 注意这个内容的周围是有引号的 ... 保存 ... 在浏览器上会立即显示出包含 game 的项目 ... 因为这个项目的 name 这个属性的值里面,包含了 game 这个字符串,所以它会显示出来 ...

<li ng-repeat="show in shows
| limitTo: limit
| orderBy: 'rate': true
| filter: 'game'
">

再试一下,家庭 ... 保存,显示的项目是 摩登家庭 ... 这个项目的 title 属性里面包含了 家庭 这两个字儿 .. 想找出不包含指定内容的项目,可以在这个内容的前面,加上一个 ! 号 .. 现在显示的项目,就是项目的内容里面就是不包含 家庭 这两个字儿的项目 ...

对象
如果你只想针对特定的的属性去查找 ... 比如我们只想找出项目的 title 属性包含特定内容的项目 ... 这里我们可以使用一个对象 ... 对象里的 key 就是要过滤的那个属性的名字 ... 先把它设置成 title ... 跟它对应的值,就是要查找的内容 ... 设置成 'game' ... 保存 ... 没有显示东西 ... 这是因为我们现在要找的东西是在 title 这个属性里的值 ...

<li ng-repeat="show in shows
| limitTo: limit
| orderBy: 'rate': true
| filter: {title: 'game'}
">

再改成 '游戏' ... 结果就是 权力的游戏,因为只有这个项目的 title 属性的值里面,包含 游戏 这两个字儿。

绑定
在这个项目的上面,我们再加上一个文本框 ... 给它绑定一个模型 .. 用一个 ng-model ... 它的值设置成 query ... 然后我们再把它设置成要查找的内容 ... 这样在这个文本框里输入的内容,就跟这个要查找的内容绑定在了一起 ...

<input type="text" ng-model="query" placeholder="搜索">
<li ng-repeat="show in shows
| limitTo: limit
| orderBy: 'rate': true
| filter: {title: query}
">

保存 ... 在这个搜索的文本框里,我们可以输入要查找的电视剧的标题 ... 输入 游戏 .. 会显示 权力的游戏 ... 输入 黑帮 ... 会显示 浴血黑帮 ...

过滤:filter《 AngularJS 基础 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点