angularJs中筛选功能-angular.filter-1
技术分享：http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/angular-filter-learn-1/
以下介绍为自己在使用angular-filter时，简单总结的用法。
开始
1.你可以使用4中不同的方法来安装angular-filter：
- 克隆或创建这个存储库
- 通过bower：通过在你的终端执行：$ bower install angular-filter
- 通过npm：通过在你的终端执行：$ npm install angular-filter
- 通过cdnjs：http://www.cdnjs.com/libraries/angular-filter
2.在包含或Angular本身外，在引用angular-filter.js（或者angular-filter.min.js）在你的项目index.html中；
3.添加‘angular.filter’依赖项；
当你做完这些，你的文件看起来就类似以下：
<!doctype html>
<html ng-app="myApp">
<head> </head>
<body>
...
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
<script src="bower_components/angular-filter/dist/angular-filter.min.js"></script>
...
<script>
var myApp = angular.module('myApp', ['angular.filter']); </script>
...
</body>
</html>
filter
从数组中选取一个子集，并将其返回成一个新的数组；
用法：
// html中：{{ collection | filter : expression : comparator}}
// js中：$filter('filter')(array, expression, comparator)
参数：array：想筛选的数组
expression：用于从数组中筛选的条件
comparator：用于确定预期值（从筛选器表达式）和实际值（从数组中的对象）中使用的比较器，应视为匹配。
$scope.friends = [
{name:'John', phone:'555-1276'},
{name:'Mary', phone:'800-BIG-MARY'},
{name:'Mike', phone:'555-4321'}
]
<tr ng-repeat="friendObj in friends | filter:{name:'John'}">
<td>{{friendObj.name}}</td>
<td>{{friendObj.phone}}</td>
</tr>
<--result
John -
-->
Date
https://docs.angularjs.org/api/ng/filter/date
将日期筛选为想要的日期格式；
用法：
// html中：{{ collection | date : format : timezone}}
// js中：$filter('date')(date, format, timezone)
参数：format为设置的日期格式，例如：'yyyy-MM-dd'
timezone被用于格式化时区。
<span>{{ | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>
<--result：
-- :: +
-->
Collection
concat
将另外一个对象或者数组拼接到已有的对象或者数组之后；
function MainController ($scope) {
$scope.array = [ {a: }, {a: } ];
$scope.object = {
: {a: },
: {a: }
};
}
<li ng-repeat="elm in array | concat:object">
{{ elm.a }}
</li>
<!--
result:
-->
unique
从数组或者对象中移除重复项；
如果提供的是一个字符串，它将用提供的表达式来过滤掉重复使用的。
用法：
//html中：{{collection | unique: 'property'}}；
//js中：$filter('unique')(collection, 'property')；
参数：collection被筛选的数组或者对象
property去掉这个属性中的重复值
function MainController ($scope) {
$scope.orders = [
{ id:, customer: { name: 'John', id: } },
{ id:, customer: { name: 'William', id: } },
{ id:, customer: { name: 'John', id: } },
{ id:, customer: { name: 'William', id: } },
{ id:, customer: { name: 'Clive', id: } }
];
}
<tr ng-repeat="order in orders | unique: 'customer.id'" >
<td> {{ order.customer.name }} , {{ order.customer.id }} </td>
</tr>
<!-- result:
All customers list:
John
William
Clive
-->
join
将一个数组转换为一个字符串；
默认情况下，它将加入元素与一个单一的空间，但是你可以提供自己的分隔符。
用法：
//html中：{{collection | join: ','}}；
//js中：collection.join(',')；
参数：collection 需要转换的数组，得到用，连接的字符串
$scope.names = ['John', 'Sebastian', 'Will', 'James'];
<p>{{ names | join:',' }}</p>
<!--result:
John, Sebastian, Will, James
-->
ps:js中的split()函数可以使用一个字符串中的某一分隔符将其字符串分隔成为数组。
Math
number
用来精确浮点数；
用法：
//html中：{{ number_expression | number : fractionSize}}
//js中：$filter('number')(number, fractionSize)
参数：number为待精确的数字
fractionSize（可选）为小数点后精确位数，默认值是3
function MainController ($scope) {
$scope.val=1234.56789;
}
<li>{{val | number:}}</li>
<li>{{val | number}}</li>
<-- result:
1234.56
1234.567
-->
如果input类型为number，则需要设置：<input type="number" string-to-number/>
定义stringToNumber：
.directive('stringToNumber', function () {
return {
require: 'ngModel',
link: function (scope, element, attrs, ngModel) {
ngModel.$parsers.push(function (value) {
return '' + value;
});
ngModel.$formatters.push(function (value) {
return parseFloat(value, 10);
});
}
};
})
max/min
用来查找并返回数组中的最大值(最小值)；
用法：
html中：{{array|max:optional}}
js中：$filter('max')(array,'optional')
<p> {{ [,,,,,,] | max }}</p>
<--result
-->
sum
计算数组中的值；
用法：
html中：{{array|sum:optional}}
js中：$filter('sum')(array,'optional')
{{[,,] | sum:}}
<--result
-->
GitHub英文文档：https://github.com/a8m/angular-filter
angularJs中筛选功能-angular.filter-1的更多相关文章
- angularJs中图表功能（有集成框架）－angular-flot
1.柱状图和折线图的数据格式: $scope.Chart.data = [ { label: "离线", data: [[0, 2]] }, { label: "在线&q ...
- 详解AngularJS中的filter过滤器用法
系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这 ...
- 【经验】angularjs 实现带查找筛选功能的select下拉框
一.背景 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有 ...
- AngularJS学习--- AngularJS中的模板template和迭代器过滤filter step2 step3
1.AngularJS 模板---step2: mvc(Model-View-Controller)模式在后端用的比较多,在前端也是一样的常用; 在AngularJS中,一个视图是模型通过HTML模板 ...
- (译) 在AngularJS中使用的表单验证功能【转】
验证功能是AngularJS里面最酷炫的功能之一,它可以让你写出一个具有良好用户体验的Web应用. 在AngularJS中,有许多用于验证的指令.我们将先学习几个最流行的内置指令,然后再创建一个自定义 ...
- (译) 在AngularJS中使用的表单验证功能
验证功能是AngularJS里面最酷炫的功能之一,它可以让你写出一个具有良好用户体验的Web应用. 在AngularJS中,有许多用于验证的指令.我们将先学习几个最流行的内置指令,然后再创建一个自定义 ...
- angularjs中的filter(过滤器)——格式化日期的date
date过滤器的功能是基于要求的格式格式化一个日期成为一个字符串. 格式化字符串的基本参数: 'yyyy': 用4位数字表示年(例如:AD 1 => 0001, AD 2010 => 20 ...
- Easyui DataGrid DateRange Filter 漂亮实用的日期区间段筛选功能
自定义扩展Jquery easyui datagrid filter组件实现对日期类型区间段的筛选功能.显示效果如一下 是不是非常实用 引用的jquery 组件是 Date Range Picker ...
- Angular筛选功能
业务场景:依据级别(level )和主题(Subtype )向后台传参数,进行筛选向前台返回数据列表. 代码如下:其中filterChoose()用于弹出筛选下拉框,filterButton()用于选 ...
随机推荐
- hdoj 5400 Arithmetic Sequence
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5400 水题 #include<stdio.h> typedef long long LL; ...
- hdoj 5328 Problems killer
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5328 #include<stdio.h> #include<algorithm> ...
- Java垃圾回收器
一.Java垃圾回收器要负责完成以下3个任务: 1.分配内存 2.确保被引用对象的内存不被错误回收 3.回收不再被引用的对象的内存空间 二.垃圾回收是一个复杂而又耗时的操作.如果JVM花费过多的时间在 ...
- 用SSH连接SSH连接nitrous.io
CSDN怎么传不上图片... http://user.qzone.qq.com/1756942789/blog/1388662053 1:先下载Bitvise SSH 2:打开 keypair man ...
- 通过javascript完成分页查询功能
主要思路: 实现分页查询的关键是设置一个页面的最大数据行数和开始行号,代码如下: 最大行数我们设置为常量,不必纠结于他,所以关键就是如何把起始行号设置为变量,让他随着我们点击[上一页]或[下一页]而改 ...
- Spring MVC防止数据重复提交
现实开发中表单重复提交的例子很多,就包括手上这个门户的项目也有这种应用场景,用的次数多,但是总结,这还是第一次. 一.基本原理 使用token,给所有的url加一个拦截器,在拦截器里面用java的UU ...
- 在VS2012中使用GDI+
首先说明,在VS的较高版本中,已经包含GDI+的SDK,不用再次下载,只需要使用前应用相应的头文件,添加些代码即可.但是VC6.0中,没有GDI+SDK,需要同志们下载才行. 步骤: 1.在stdaf ...
- PHP网址
15个魔术方法的总结: http://blog.csdn.net/bossdarcy/article/details/6210794 PHP代码重构:http://blog.csdn.net/tony ...
- Myeclipse如何整合tomcat
.在本机上安装MyEclipse和Tomcat 5软件程序 2.运行MyEclipse,设置与Tomcat 5服务器的连接,如下图所示: 选择Window--->Preferences,点击进入 ...
- jquery 新建的元素事件绑定问题
js的事件监听跟css不一样,css只要设定好了样式,不论是原来就有的还是新添加的,都有一样的表现.而事件监听不是,你必须给每一个元素单独绑定事件. 常见的例子是处理表格的时候.每行行末有个删除按钮, ...