简述angular 中constant和$filter的用法
1.背景介绍
什么是中constant和$filter，constant是用来设置常量的，constant(name,value)可以将一个已经存在的变量值注册为服务，通过依赖注入将其注入到应用的其他部分中，constant(name,value)可以将一个已经存在的变量值注册为服务，并将其注入到应用的其他部分中。其中，name为注册的常量的名字，value为注册的常量的值或对象。$filter是AngularJs 服务，$filter是过滤器，用来格式化数据用的。
2.知识剖析
2.1constant剖析
1，通过var 直接定义global variable，和纯js是一样的。
2，用angularjs value来设置全局变量 。
3，用angularjs constant来设置全局变量 。
本次看一下用angularjs constant来设置全局变量 。
2.2$filter剖析
$filter 过滤器，是angularJs中用来处理数据以更好的方式展示给我用户。比如格式化日期，转换大小写等等。 * 过滤器即有内置过滤器也支持自定义过滤器。内置过滤器很多，可以百度。关键是如何使用，本次讲解$filter
3.常见问题
filter应用
怎么自定义$filter
4.解决方案
自定义过滤器：{{带过滤数据 | 过滤器名：参数1：参数2：参数3.....}}
app.filter('过滤器名', function () {
return function (待过滤数据, 参数....) {
......
return 已过滤数据;
}
5.编码实战
<div class="page-wrapper ">
<ui-view></ui-view>
<!-- 1111111 -->
<h1 style="color: red ">
{{A.b}} <br>
</h1>
<br>
<br> 自定义函数：
<h1 style="color: rgb(61, 8, 8) " ng-repeat=" x in Arr2 | reverse "><span>{{x}}</span> </h1>
<br/>
<br/>
<!-- 22222222 -->
<div style="color: rgb(255, 0, 170);font-size: 30px ">
{{ 12.45 | currency:'￥':1 }}
<br> {{ 1432075948123 | date:"MM/dd/yyyy @ h:mma "}}
</div>
<br/>
<br/>
<p style="color: rgb(0, 0, 0);font-size: 20px "> 用法1（参数expression使用String）
</p>
<!-- 用法1（参数expression使用String）： -->
<div style="color: blue;font-size: 30px " ng-repeat="x in Arr0 |filter : 'a'">
<span>Name: {{x.name}}</span>
<span>Age: {{x.age}}</span>
</div>
<br/>
<br/>
<p style="color: rgb(0, 0, 0);font-size: 20px "> 用法2（参数expression使用function）
</p>
<!-- 用法2（参数expression使用function）： -->
<div style="color: rgb(9, 255, 9);font-size: 30px " ng-repeat="x in Arr0 |filter: myFilter ">
<span>Name:{{x.name}}</span>
<span>Age:{{x.age}}</span>
</div>
<br/>
<br/>
<p style="color: rgb(0, 0, 0);font-size: 20px "> 用法3 参数expression使用object）
</p>
<!-- 用法3 参数expression使用object）： -->
<div style="color: rgb(9, 255, 9);font-size: 30px " ng-repeat="u in Arr | filter:{age:18}">
<span>"老婆 ":{{u.name}}</span>
<span>"年龄 ":{{u.age}}</span>
</div>
<br/>
<br/>
<p style="color: rgb(0, 0, 0);font-size: 20px ">用法4（指定comparator为true或false）： 指定comparator为false或者undefined，即为默认值可不传，将以大小写不敏感的方式匹配任意内容 true即大小写及内容均需完全匹配
</p>
输入:
<input ng-model="yourName" style="background-color: rgb(255, 196, 0);font-size: 30px ">
<div style="color: rgb(255, 196, 0);font-size: 30px " ng-repeat="x in Arr0 | filter:{name:yourName}:false ">
<span>Name :{{x.name}}</span>
<span>Age :{{x.age}}</span>
</div>
<br>
<br>
<!--先在Controller中定义function:myComparator, 此function将能匹配大小写不敏感的内容，但与comparator为false的情况不同的是，comparator必须匹配全文
-->
<p style="color: rgb(0, 0, 0);font-size: 20px "> 先在Controller中定义function:myComparator, 此function将能匹配大小写不敏感的内容，但与comparator为false的情况不同的是，comparator必须匹配全文</p>
<div>
输入:
<input style="background-color: rgb(0, 217, 255);font-size: 30px " ng-model="youName" />
<div style="color: rgb(255, 196, 0);font-size: 30px " ng-repeat="u in Arr0 | filter:{name:youName}:myComparator ">
<span>Name:{{u.name}}</span>
<span>Age:{{u.age}}</span>
</div>
</div>
<br/>
<br/>
<p style="color: rgb(0, 0, 0);font-size: 20px "> limitToFilter（limitTo）,用法（选取前N个记录）
</p>
<!-- limitToFilter（limitTo）,用法（选取前N个记录）： -->
<div style="color: rgb(9, 255, 9);font-size: 30px " ng-repeat="u in Arr | limitTo:2 ">
<span>"老婆 ":{{u.name}}</span>
<span>"年龄 ":{{u.age}}</span>
</div>
<br>
<br>
<div class="divAll ">
<input style="background-color: rgb(238, 255, 0);font-size: 30px " type="text " placeholder="输入你要搜索的内容 " ng-model="key ">
<br>
<br>
<table cellspacing="0 ">
<thead>
<tr>
<th>老婆</th>
<th>年龄
<input type="button" ng-show="isAsc" value="▼" ng-click="sort()">
<input type="button" ng-show="!isAsc" value="▲" ng-click="sort()">
</th>
<th>时间</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="g in goods | filter :key | orderBy : 'age' : isAsc">
<td>{{g.number}}</td>
<td>{{g.age}}</td>
<td>{{g.inTime | date:'yyyy-MM-dd'}}</td>
<!--将秒数改成日期格式 年-月-日-->
<td>{{g.name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
angular.module("myApp")
.filter('reverse', function() { //可以注入依赖
return function(array) {
var newArray=[]
angular.forEach(array,function(i){
if(i>2){
newArray.push(i*2)
}
})
return newArray;
}
})
.controller("listController", function ($scope, $state, A) {
$scope.A = A; //方法，赋值
// $scope.msg = "";
$scope.Arr0 = [
{name:'Tom', age:20},
{name:'Tom Senior', age:50},
{name:'May', age:21},
{name:'Jack', age:20},
{name:'Nancy', age:25}
]
$scope.Arr = [
{name:'新垣结衣', age:18},
{name:'石原里美', age:23},
{name:'桥本环奈', age:21},
{name:'桥本爱', age:22},
{name:'长泽雅美', age:22}
]
$scope.Arr2 = [
1,2,3,4,5
]
myApp.filter('myFilter', function () {
return x.age === 20;
});
$scope.myComparator = function (expected, actual) {
return angular.equals(expected.toLowerCase(), actual.toLowerCase());
}
$scope.goods = [
{number:"apple",age:18,inTime:1488785356895,name:"新垣结衣"},
{number:"blue",age:23,inTime:1488685355895,name:"石原里美"},
{number:"cat",age:25,inTime:1468785355895,name:"桥本爱"},
{number:"neko",age:22,inTime:1482785355895,name:"桥本环奈"}
]
;
6.扩展思考
constant和value区别：
1.value不可以在config里注入，但是constant可以 2.value可以修改，但是constant不可以修改，一般直接用constant配置一些需要经常使用的数据。
7.参考文献
AngularJS constant和value区别详解
AngularJS的Filter用法详解
8.更多讨论
1，问：还有哪些过滤器
答：currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。，
2，问：可以使用多个过滤器吗
答：可以比如这样
<tr ng-repeat="g in goods | filter :key | orderBy : 'age' : isAsc">
3，问：orderBy 是干嘛的
答：AngularJS中orderBy进行排序，第一个参数可以有三种类型，分别为：function,string,array:
第一种:function,如果是function,那么function函数会遍历待排序的数组，并将返回的结果作为angular库函数中comparator的参数，进行比较排序。
第二：如果是字符串，假如待排序的数组为对象，那么将会按照待排序数组中的每个对象的对应属性值，进行排序。如果字符串前边加有“+”，“-”符号，那么+表示升序排序，-表示降序排序。如果字符串为空，那么将按照元素自身进行排序。
第三种：如果是array,那么是第二种情况的一种多属性排序方式 。比如参数为[a,b],那么将先按照a属性值进行排序，如果a属性值相同，那么将按照b属性值进行排序。
