angularJs中筛选功能-angular.filter-1

前端之家收集整理的这篇文章主要介绍了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’依赖项;

当你做完这些,你的文件看起来就类似以下:

<!doctypehtml>
<htmlng-app="myApp">
<head>

</head>
<body>
...<scriptsrc="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
<scriptsrc="bower_components/angular-filter/dist/angular-filter.min.js"></script>
...<script>varmyApp=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'}
]<trng-repeat="friendObjinfriends|filter:{name:'John'}">
<td>{{friendObj.name}}</td>
<td>{{friendObj.phone}}</td>
</tr>

<--result
John555-1276-->

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>{{1288323623006|date:'yyyy-MM-ddHH:mm:ssZ'}}</span>
<--result:2010-10-2911:40:23+0800-->

Collection

concat

将另外一个对象或者数组拼接到已有的对象或者数组之后;

functionMainController($scope){
$scope.array=[{a:1},{a:2}];
$scope.object={0:{a:3},1:{a:4}
};
}<ling-repeat="elminarray|concat:object">
{{elm.a}}</li>

<!--result:1234-->

unique

从数组或者对象中移除重复项;

如果提供的是一个字符串,它将用提供的表达式来过滤掉重复使用的。

用法

//html中:{{collection|unique:'property'}};//js中:$filter('unique')(collection,'property');参数:collection被筛选的数组或者对象
property去掉这个属性中的重复值
functionMainController($scope){
$scope.orders=[
{id:1,customer:{name:'John',id:10}},{id:2,customer:{name:'William',id:20}},{id:3,{id:4,{id:5,customer:{name:'Clive',id:30}}
];
}<trng-repeat="orderinorders|unique:'customer.id'">
<td>{{order.customer.name}},{{order.customer.id}}</td>
</tr>
<!--result:
Allcustomerslist:
John10William20Clive30-->

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

functionMainController($scope){
$scope.val=1234.56789;
}<li>{{val|number:2}}</li>
<li>{{val|number}}</li>

<--result:1234.561234.567-->

max/min

用来查找并返回数组中的最大值(最小值);

用法

html中:{{array|max:optional}}
js中:$filter('max')(array,'optional')
<p>{{[1,2,3,4,7,8,9]|max}}</p>
<--result9-->


sum

计算数组中的值;

用法

html中:{{array|sum:optional}}
js中:$filter('sum')(array,'optional')

{{[1,3]|sum:10}}<--result16-->

GitHub英文文档:https://github.com/a8m/angular-filter

猜你在找的Angularjs相关文章