简述angular 中constant和$filter的用法

简述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属性值进行排序。