扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
技术分享:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/angular-filter-learn-1/
创新互联专注骨干网络服务器租用10余年,服务更有保障!服务器租用,雅安电信机房 成都服务器租用,成都服务器托管,骨干网络带宽,享受低延迟,高速访问。灵活、实现低成本的共享或公网数据中心高速带宽的专属高性能服务器。以下介绍为自己在使用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’依赖项;
当你做完这些,你的文件看起来就类似以下:
... ... ...
从数组中选取一个子集,并将其返回成一个新的数组;
用法:
// 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'} ]<--result John 555-1276--> `friendObj`.`name` `friendObj`.`phone`
https://docs.angularjs.org/api/ng/filter/date
将日期筛选为想要的日期格式;
用法:
// html中:{{ collection | date : format : timezone}}// js中:$filter('date')(date, format, timezone)参数:format为设置的日期格式,例如:'yyyy-MM-dd'
timezone被用于格式化时区。
{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}
<--result:2010-10-29 11:40:23 +0800-->
将另外一个对象或者数组拼接到已有的对象或者数组之后;
function MainController ($scope) { $scope.array = [ {a: 1}, {a: 2} ]; $scope.object = { 0: {a: 3}, 1: {a: 4} }; }
从数组或者对象中移除重复项;
如果提供的是一个字符串,它将用提供的表达式来过滤掉重复使用的。
用法:
//html中:{{collection | unique: 'property'}};//js中:$filter('unique')(collection, 'property'); 参数:collection被筛选的数组或者对象 property去掉这个属性中的重复值 function MainController ($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 } } ]; }{{ order.customer.name }} , {{ order.customer.id }}
将一个数组转换为一个字符串;
默认情况下,它将加入元素与一个单一的空间,但是你可以提供自己的分隔符。
用法:
//html中:{{collection | join: ','}};//js中:collection.join(','); 参数:collection 需要转换的数组,得到用,连接的字符串 $scope.names = ['John', 'Sebastian', 'Will', 'James'];{{ names | join:',' }}
ps:js中的split()函数可以使用一个字符串中的某一分隔符将其字符串分隔成为数组。
用来精确浮点数;
用法:
//html中:{{ number_expression | number : fractionSize}}//js中:$filter('number')(number, fractionSize)参数:number为待精确的数字 fractionSize(可选)为小数点后精确位数,默认值是3 function MainController ($scope) { $scope.val=1234.56789; }
用来查找并返回数组中的大值(最小值);
用法:
html中:{{array|max:optional}} js中:$filter('max')(array,'optional'){{ [1,2,3,4,7,8,9] | max }}
<--result9-->
计算数组中的值;
用法:
html中:{{array|sum:optional}} js中:$filter('sum')(array,'optional') {{[1,2,3] | sum:10}}<--result16-->
GitHub英文文档:https://github.com/a8m/angular-filter
创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流