简述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:
"桥本环奈"}
]
;
![](https://i-blog.csdnimg.cn/blog_migrate/d1b8a05e8f432cbedc02f09de3deb183.png)
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属性值进行排序。