过滤 #2

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

filter 这个过滤器也可以让我们自己去定义过滤比较的条件 .. 比如我们要找出评分大于 9 分的电视剧 ... 先打开 index.html ... 在这个列表元素上面,再用一个 filter ... 它的表达式这个参数是一个对象 ... 对象的 key 是 rate ... 也就是电视剧的评分这个属性 ... 它的值先设置成 9 ...

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

保存 ... 现在浏览器上显示的结果是,电视剧的列表里面,评分属性的值里包含 9 的项目,比如这里 8.9 这个评分的 冰血暴 也在这里出现了 ... 我们想要的是,项目的评分属性的值要大于 9 ...

打开 app.js ... 在 ShowController 这个控制器里面,先去定义一个方法 ... 把它放到 $scope 的上面,这样我们可以在视图上使用这个方法 ... 方法的名字可以叫它 comparator ... 这个方法支持两个参数 ... 第一个参数是 actual ,它表示项目的属性真正的值 ... 第二个参数是 expected ... 它的值就是我们要查找的那个值 ...

在这个方法里,我们可以返回比较的条件返回 ture 的项目 ... 用一个 return ... 要比较的是 actual > expected; 意思就是,如果项目真正的值大于我们期待的值,就把这个项目返回来 ...

$scope.comparator = function(actual, expected) {
return actual > expected;
};

保存 ... 回到 index.html ... 我们需要在这个 filter 过滤器的上面,使用这个方法 ... 加上一个冒号 ... 然后是这个方法的名字 ... comparator ...

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

再保存一下 ... 现在,浏览器上面,显示的项目,就是项目的 rate 评分属性的值,大于 9 的所有的项目 ...

过滤 #2《 AngularJS 基础 》

统计

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

社会化网络

关于

微信订阅号

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