angularjs 过滤器filter 学习笔记

文章参考

http://www.tuicool.com/articles/ueUZBv

过滤器（filter）正如其名，作用就是接收一个输入，通过某个规则进行处理，然后返回处理后的结果。

主要用在数据的格式化上，例如获取一个数组中的子集，对数组中的元素进行排序等。

ng内置了一些过滤器(总共九种)，它们是：

currency(货币)

date(日期)

filter(子串匹配)

json(格式化json对象)

limitTo(限制个数)

扫描二维码关注公众号，回复： 411266 查看本文章

lowercase(小写)

uppercase(大写)

number(数字)

orderBy(排序)

除此之外还可以自定义过滤器，这个就强大了，可以满足任何要求的数据处理。

日期格式化

<p>{{time | date: 'yyyy-MM-dd HH:mm:ss'}}</p>
<p>{{1432075948123 | date: 'yyyy-MM-dd HH:mm:ss'}}</p>

数组对象筛选

<div ng-init="myArr = [{name:'Tom', age:20}, {name:'Tom Senior', age:50}, {name:'May', age:21}, {name:'Jack', age:20}, {name:'Alice', age:22}]">
	<!-- 参数expression使用String，将全文搜索关键字 'a' -->
	<div ng-repeat="u in myArr | filter:'a' ">
		<p>Name:{{u.name}}</p>
		<p>Age:{{u.age}}</p>
		<br />
	</div>
</div>

$scope.childrenArray = [
	{name:'kimi',age:3},
	{name:'cindy',age:4},
	{name:'anglar',age:4},
	{name:'shitou',age:6},
	{name:'tiantian',age:5}
];

$scope.func = function(e){
	return e.age>4;
}

{{ childrenArray | filter : 'a' }} //匹配属性值中含有a的
{{ childrenArray | filter : 4 }}  //匹配属性值中含有4的
{{ childrenArray | filter : {name : 'i'} }} //参数是对象，匹配name属性中含有i的
{{childrenArray | filter : func }}  //参数是函数，指定返回age>4的

json(格式化json对象)

json过滤器可以把一个js对象格式化为json字符串，没有参数。

{{ jsonTest | json}}

控制器controller和service 中使用filter

例如我要在controller中使用currency过滤器，只需将它注入到该controller中即可

app.controller('testC',function($scope,currencyFilter){
    $scope.num = currencyFilter(123534);  
}

app.controller('testC',function($scope,$filter){
    $scope.num = $filter('currency')(123534);
　　$scope.date = $filter('date')(new Date());  
}

自定义过滤器

/**
 * 在为null， undefined， ""， 的情况下面设置默认值
 * */
angular.module('hkApp')
	.filter("setDefaultValueWithoutData",function(){
		return function(inputValue,defaultValue){
			if(inputValue == null || inputValue == undefined || inputValue == ""){
				return defaultValue;
			}
			return inputValue;
		}
	});

提醒：filter方法里面是直接返回一个function，没有任何参数，方法里面返回的函数中才是需要处理的数据。如果需要在filter方法里面添加参数，这个参数就需要“注入”定义的服务或者方法。

angular.module('Swpz')
    .filter('expressStateFilter', function() {
        return function(value) {
            var state;
            switch (value) {
                case '0':
                    state = '运输中';
                    break;
                case '1':
                    state = '揽件';
                    break;
                case '2':
                    state = '疑难';
                    break;
                case '3':
                    state = '签收成功';
                    break;
                case '4':
                    state = '已退签';
                    break;
                case '5':
                    state = '正在派件';
                    break;
                case '6':
                    state = '已退回';
                    break;
            }
            return state;
        };
    });

过滤器需要显示HTML标签的样式

<p ng-bind-html="currentWork.description | to_trusted"></p>

app.filter('to_trusted', ['$sce', function ($sce) {
  return function (text) {
      return $sce.trustAsHtml(text);
  };
}]);

备注：

1、ng-bind-html 需要与 $sce 配合一起使用。

2、注意过滤器如何注入其他的service

angularjs 过滤器filter 学习笔记

猜你喜欢