简述Angular中constant和$filter的用法

大家好，我是IT修真院深圳分院第06期学员，一枚正直善良的web程序员。

今天给大家分享一下，修真院官网 JS-08任务中可能会使用到的知识点：

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;
});

<!-- html -->
{{myName}}  // chentietou

filter

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

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

filter的两种使用方法:

1. 在模板中使用filter

<!-- 我们可以直接在{{}}中使用filter，跟在表达式后面用 | 分割，语法如下： -->

{{ expression | filter }}

<!-- 也可以多个filter连用，上一个filter的输出将作为下一个filter的输入 -->

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

<!-- filter可以接收参数，参数用 : 进行分割，如下： -->

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

<!-- 除了对{{}}中的数据进行格式化，我们还可以在指令中使用filter，例如先对数组array进行过滤处理，然后再循环输出： -->

<span ng-repeat="a in array | filter "></span>

2. 在controller和service中使用filter

<!-- 我们的js代码中也可以使用过滤器，方式就是我们熟悉的依赖注入，例如我要在controller中使用currency过滤器，只需将它注入到该controller中即可，代码如下：-->

app.controller('test',function($scope,currencyFilter){
    $scope.num = currencyFilter(123534);  
}
<!-- 在模板中使用{{num}}就可以直接输出$123,534.00了！在服务中使用filter也是同样的道理。 -->

<!-- 此时你可能会有疑惑，如果我要在controller中使用多个filter，难道要一个一个注入吗，这岂不太费劲了？其实我们只需要使用ng提供了一个$filter服务就可以来调用所需的filter，你只需注入一个$filter就够了，使用方法如下： -->

$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.扩展思考

如何自定义过滤器

              // 自定义过滤器
	      demo.filter("typeFilter",function () {
			return function (types) {
				switch(types) {
					case '0':
					return "首页banner";
					case '1':
					return "找职位banner";
					case '2':
					return "找精英banner";
					case '3':
					return "行业大图";
				}
			}
		})

 HTML：

             <h2>自定义过滤器</h2>
			<input type="text" ng-model="type">
			<div>过滤后的数据：{{ type | typeFilter }}</div>

根据输入的值，显示不同结果。效果如下：

7.参考文献

走进AngularJs(七) 过滤器（filter）

AngularJS的Filter用法详解

angularJS constant和value

8.更多讨论

问题1：能看下你任务中constant的写法么？

回答：

问题2：怎么将filter和constant注入到controller中？

回答：

问题3：filter第9个排序，可以加上筛选么？

回答： 可以的。

{{ nameArray | orderBy : 'age' | filter: func}}

拿demo里的例子来说，我们对nameArray这个数据先进行按 'age' 排序，然后再筛选出 age > 30的数据，因此结果为：

[{"name":"钟铁头","age":36},{"name":"陈阿婆","age":99}]

视频

PPT

IT修真院欢迎您，邀请码：20152484