filter,orderBy等过滤器
filter用法比较灵活(也增加了较高的复杂度),单独列出。
基本的用法:
<input type="text" class="search" ng-model="keyword" />
ng-repeat="item in items | filter:{name:keyword,done:false}" // 默认是and连接多个属性
ng-repeat="item in items | filter:{$:keyword,done:false}" // 表示只计入未完成的,$表示:or
$scope.doneSelect=function(item){ // 这个item是每一项而不是整个源数据(items)
return item.done && item.estimation>20; // 返回true表示保留(而不是返回一个新数据源)
}
ng-repeat="item in items | filter:doneSelect"
统计技巧:
ng-repeat="item in filteredBacklog={backlog|filter:{$:criteria,done:false}}"
Total:{{filteredBacklog.length}}
书中建议这类代码应该放在控制器中(控制器中可以访问$filter),这样更容易实现单元测试。
-----------------------------------------------------------------------------------
orderBy的用法比较简单
<thead>
<th ng-click="sort('name')">Name</th>
<th ng-click="sort('desc')">Description</th>
</thead>
<tbody>
<!--sortFiled: string 是排序的属性名-->
<!--reverse: boolean true升序,false降序-->
<!--排序放在filter之后,是有原因的。相比过滤,排序要付出更大的代价-->
<tr ng-repeat="item in filteredBacklog = (backlog | filter:criteria | orderBy:sortFiled:reverse)">
<td>{{item.name}}</td>
<td>{{item.desc}}</td>
...
</tr>
</tbody>
$scope.sortField = undefined;
$scope.reverse = false; $scope.sort = function(filedName) {
if ($scope.sortField === filedName) {
$scope.reverse = !$scope.reverse;
} else {
$scope.sortField = filedName;
$scope.reverse = false;
}
}
------------------------------------------------------------
从controller、filter(控制器、服务、其他过滤器)等中访问过滤器
// 第一种写法
angular.module('trimFilter', []) .filter('trim', function($filter) { var limitToFilter = $filter('limitTo'); return function(input, limit) {
if (input.length > limit) {
return limitToFilter(input, limit - 3) + '...';
}
return input;
};
});
// 更好的写法(更易读、代码更少)
.filter('trimII', function(limitToFilter) { return function(input, limit) {
if (input.length > limit) {
return limitToFilter(input, limit - 3) + '...'
}
return input;
};
});
filter,orderBy等过滤器的更多相关文章
- Introducation of Servlet filter(servlet过滤器介绍 )
本文章向大家介绍Servlet Filter,主要包括 Servlet Filter使用实例.应用技巧.基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下. 过滤器是一个可以转换 ...
- Filter登录验证过滤器(全局)
通过Filter来定义一个登录验证过滤器,这是就不需要在每一个JSP页面添加判断用户合法性的代码了. 以下示例中包含了5个文件,一个是登录表单LoginForm.jsp,一个是登录判断页LoginCo ...
- jsp filter登录限制过滤器
http://www.cnblogs.com/hemingwang0902/archive/2012/01/09/2316956.html UserFilter.java package filter ...
- Bloom Filter(布隆过滤器)如何解决缓存穿透
本文摘抄自我的微信公众号"程序员柯南",欢迎关注!原文阅读 缓存穿透是什么? 关于缓存穿透,简单来说就是系统处理了大量不存在的数据查询.正常的使用缓存流程大致是,数据查询先进行缓存 ...
- Filter接口编写过滤器
Filter,过滤器,顾名思义,即是对数据等的过滤,预处理过程.为什么要引入过滤器呢?在平常访问网站的时候,有时候发一些敏感的信息,发出后显示时 就会将敏感信息用*等字符替代,这就是用过滤器对信息 ...
- elasticsearch 深入 —— Post Filter后置过滤器
过滤查询以及聚合 A natural extension to aggregation scoping is filtering. Because the aggregation operates i ...
- Bloom Filter(布隆过滤器)
布隆过滤器用于测试某一元素是否存在于给定的集合中,是一种空间利用率很高的随机数据结构(probabilistic data structure),存在一定的误识别率(false positive),即 ...
- codeforces Gym 100338F Spam Filter 垃圾邮件过滤器(模拟,实现)
阅读题, 概要:给出垃圾邮件和非垃圾邮件的集合,然后按照题目给出的贝叶斯公式计算概率一封邮件是垃圾邮件的概率. 逐个单词判断,将公式化简一下就是在垃圾邮件中出现的次数和在总次数的比值,大于二分之一就算 ...
- AngularJs filter 过滤器
Filter Ng里的过滤器. currency:把一个数字格式化成货币模式(如$1,234.56).当没有提供任何货币符号时,默认使用当前区域的符号. 使用: HTML:{{ currency_ex ...
随机推荐
- 三、spinner
今天 ,看的和学的都不多,就弄了一个spinner控件而已,下面就记录一下spinner 用法吧 基本上说,使用spinner 有三个步骤 一.在布局文件里面设置spinner 控件,这个不用再多说了 ...
- PHP连接打印机
<?php header("Content-type: text/html; charset=utf-8"); class Netprint{ public $host = ...
- [Monitor] 监控规则定义
系统监控规则:
- ASP.NET 5探险(4):如何把ASP.NET 5从beta4升级到beta5
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:上一篇文章讲述了ASP.NET 5 Beta带来的一些变化,虽然原文最后给出了从bet ...
- HR外包系统 - 员工项目 薪资项目 考勤项目 -管理
项目管理-包括员工项目 薪资项目 考勤项目 一 后台总公司定义项目-前台分公司选择项目,定义别名-分公司客户选择员工项目,定义别名 分公司下面-新建薪资类别-薪资类别下面选择要的薪资和考勤项目. 二 ...
- bat 炸弹升级
转自:http://digi.163.com/15/0320/06/AL4LP0QD0016192R.html 第1页:什么是批处理炸弹? 最近网上流传一个叫做<大哥别杀我>视频纷纷遭到网 ...
- poj 1141 区间dp+递归打印路径
Brackets Sequence Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 30383 Accepted: 871 ...
- hdu 2546 饭卡 删除一个数的01背包
饭卡 Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...
- 70多G的Kindle电子书合集
70多个G的电子书. 百度网盘分享了几次被屏蔽了, 360网盘每个文件夹最多只能分享2000个文件,所以只能分成多个文件夹分享. 如果大家知道更好的分享方式,欢迎留言相告,多谢: http://yun ...
- jQuery Multi-TouchWipe / Multi-TouchZoom
jQuery Multi-TouchWipe / Multi-TouchZoom是小弟参照WipeTouch扩展出来的针对多点触屏划动而改写出来的Jquery插件,可以为dom上的两手指触屏划动拨入( ...