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’依赖项；

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

    ...    
    
    ...    
    ...

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'}
]
    `friendObj`.`name`
    `friendObj`.`phone`

 
<--result
John 555-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被用于格式化时区。 
{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}
<--result：2010-10-29 11:40:23 +0800-->

Collection

concat

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

function MainController ($scope) {
  $scope.array = [ {a: 1}, {a: 2} ];
  $scope.object = {    0: {a: 3},    1: {a: 4}
  };
}
  {{ elm.a }}

unique

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

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

用法：

//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 }} 

join

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

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

用法：

//html中：{{collection | join: ','}}；//js中：collection.join(',')； 参数：collection 需要转换的数组，得到用，连接的字符串
 
$scope.names = ['John', 'Sebastian', 'Will', 'James'];
{{ names | join:',' }}
 
 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;
}
{{val | number:2}}
{{val | number}}
 
<-- result:1234.561234.567-->

max/min

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

用法：

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

sum

计算数组中的值；

用法：

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级流量清洗系统配攻击溯源，准确进行流量调度，确保服务器高可用性。佳节活动现已开启，新人活动云服务器买多久送多久。