【js-07】简述angular中constant和$filter的用法

深圳小课堂

分享人:张峻

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

我们在使用AngularJS时常常需要在不同的控制器中使用到相同的数据,或者是有一些数据需要经常用到的,这时就需要一个全局常量 constant ,使用的时候只需要在控制器注入即可。

假如我们需要把时间戳格式化成某种特定日期格式或者把数据转换大小写等等就需要用到 $filter 即过滤器,是AngularJS中用来处理数据以更好的方式展示给用户。

2.知识剖析

constant

constant是一个非常有用的service(服务),它经常被用来在指令中提供默认配置。因此如果你正在创建一个指令,并且你想要在给指令传递可选参数的同时进行一个默认配置,一个constant就是一个好办法。作为一个constant,我们放入其中的值将不会改变。constant service 基本上会是一个基本类型的值或者是一个对象。

下面我们来举个例子:

					
var app = angular.module('app', []);
 
app.constant('name', 'chentietou');
 
app.controller('ctrl', function ($scope, name) {
  $scope.myName = name;
});


{{myName}}  // chentietou
					
				

filter

过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果。主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等。ng内置了一些过滤器,它们是:currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。总共九种。

除此之外还可以自定义过滤器,这个就强大了,可以满足任何要求的数据处理。过滤器的内容非常简单,只要明白了内置的如何使用,自己如何定义一个filter就OK了

filter的两种使用方法:

1. 在模板中使用filter

					


{{ expression | filter }}



{{ expression | filter1 | filter2 | ... }}



{{ expression | filter:argument1:argument2:... }}




					
				

2. 在controller和service中使用filter

					


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




$filter('过滤器名称')(需要过滤的对象,参数1,参数2,...); 

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

3.常见问题

如何使用angular中constant和$filter

4.解决方案

5.编码实战

demo

6.扩展思考

如何自定义过滤器

7.参考文献

参考一:走进AngularJs(七) 过滤器(filter)

参考二:AngularJS的Filter用法详解

参考三:angularJS constant和value

8.更多讨论

感谢观看

BY : 张峻