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

2024-12-09 技术教程

技术分享：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><--resultJohn555-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-->Collectionconcat

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

functionMainController($scope){$scope.array=[{a:1},{a:2}];$scope.object={0:{a:3},1:{a:4}};}<ling-repeat="elminarray|concat:object">{{elm.a}}</li>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,customer:{name:'John',id:10}},{id:4,customer:{name:'William',id:20}},{id:5,customer:{name:'Clive',id:30}}];}<trng-repeat="orderinorders|unique:'customer.id'"><td>{{order.customer.name}},{{order.customer.id}}</td></tr>join

将一个数组转换为一个字符串；

默认情况下，它将加入元素与一个单一的空间，但是你可以提供自己的分隔符。

用法：

//html中：{{collection|join:','}}；//js中：collection.join(',')；参数：collection需要转换的数组，得到用，连接的字符串$scope.names=['John','Sebastian','Will','James'];<p>{{names|join:','}}</p>ps:js中的split()函数可以使用一个字符串中的某一分隔符将其字符串分隔成为数组。Mathnumber

用来精确浮点数；

用法：

//html中：{{number_expression|number:fractionSize}}//js中：$filter('number')(number,fractionSize)参数：number为待精确的数字fractionSize（可选）为小数点后精确位数，默认值是3functionMainController($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,2,3]|sum:10}}<--result16-->

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