首 页  -  技术分享  - angularJs中筛选功能-angular.filter-1

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

分享者:毛亚枝     2016-03-24

以下介绍为自己在使用angular-filter时,简单总结的用法。

开始

1.你可以使用4中不同的方法来安装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 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被用于格式化时区。
 
<span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>
<--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}
  };
}
<li ng-repeat="elm in array | concat:object">
  {{ elm.a }}
</li>

<!--
result:
1 2 3 4
-->

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 } }
  ];
}
<tr ng-repeat="order in orders | unique: 'customer.id'" >
   <td> {{ order.customer.name }} , {{ order.customer.id }} </td>
</tr>
<!-- result:
All customers list:
John 10
William 20
Clive 30
-->

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:2}}</li>
<li>{{val | number}}</li>
 
<-- result:
1234.56
1234.567
-->

max/min

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

用法:

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

sum

计算数组中的值;

用法:

html中:{{array|sum:optional}}
js中:$filter('sum')(array,'optional')
 
{{[1,2,3] | sum:10}}
<--result
16
-->

 

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