Angular之过滤器(filter)与作用域(scope)

来源：互联网发布：淘宝付了尾款可以退吗编辑：程序博客网时间：2024/06/05 15:52

过滤器(filter)

1. 内置过滤器

包含以下9种过滤器：

currency(货币处理)
使用currency可以将数字格式化为货币，默认是美元符号，你可以自己传入所需的符号，例如传入人民币：{{num | currency : '￥'}}
date(日期格式化)
{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}
y M d h m s E 分别表示 ‘年月日时分秒星期’，除此之外还有更多，
你可以自由组合它们。也可以使用不同的个数来限制格式化的位数。另外参数也可以使用特定的描述性字符串，例如“shortTime”将会把时间格式为 12:05 pm这样的。angular提供了八种描述性的字符串
filter(匹配子串)
用来处理一个数组，然后可以过滤出含有某个子串的元素，作为一个子数组来返回。可以是字符串数组，也可以是对象数组。如果是对象数组，可以匹配属性的值。它接收一个参数(这个参数可以是字符串，也可以是函数)，用来定义子串的匹配规则。

    $scope.arr = [        {name:'cat',sing:'mewed'},        {name:'dog',sing:'bark'},        {name:'pig',sing:'hanghang'},        {name:'bird',sing:'song'},    ];    $scope.func = function(e){return e.sing='hanghang';}    {{ arr | filter : 'g' }} //匹配属性值中含有c的    {{ arr | filter : {name : 'i'} }} //参数是对象，匹配name属性中含有d的    {{childrenArray | filter : func }}  //参数是函数，指定返回sing='hanghang'的1
2
3
4
5
6
7
8
9
10
11

json(格式化json对象)
{{ jsonTest | json}}
json过滤器可以把一个js对象格式化为json字符串，没有参数。
这个过滤器一般在实际生产环境中用不到，官方的解释是方便开发者调试。
limitTo(限制数组长度或字符串长度)
limitTo过滤器用来截取数组或字符串，接收一个参数用来指定截取的长度，只能从数组或字符串的开头进行截取，没有原生js好用：
{{ arr | limitTo : 2 }} //将会显示数组中的前两项
uppercase(大写)
lowercase(小写)
number(格式化数字)
number过滤器可以为一个数字加上千位分割，像这样，123,456,789。同时接收一个参数，可以指定小float类型保留几位小数.
{{ num | number : 2 }}
orderBy(排序)
orderBy过滤器可以将一个数组中的元素进行排序，接收一个参数来指定排序规则，参数可以是一个字符串，表示以该属性名称进行排序。可以是一个函数，定义排序属性。还可以是一个数组，表示依次按数组中的属性值进行排序（若按第一项比较的值相等，再按第二项比较）.
<div>{{ childrenArray | orderBy : 'age' }}</div> //按age属性值进行排序
<div>{{ childrenArray | orderBy : orderFunc }}</div> //按照函数的返回值进行排序
<div>{{ childrenArray | orderBy : ['age','name'] }}</div> //如果age相同，按照name进行排序

2. 过滤器的使用

单个过滤器
{{表达式 | 过滤器名}}
例如：{{8.88 | currency}} ==> $8.88
多个过滤器
{{表达式 | 过滤器名1 | 过滤器名2 | …}}
带参数过滤器
{{表达式 | 过滤器名1：参数1 ：参数2 ： …}}
例如：{{ 88886.88 | number:1 }} ==> 88,886.9

3. 自定义过滤器

filter的自定义方式也很简单，使用module的filter方法，返回一个函数，该函数接收输入值，并返回处理后的结果。

    <div ng-controller='myController'>        <ul>            <li>                <span>序号</span>                <span>姓名</span>                <span>性别</span>                <span>年龄</span>                <span>分数</span>            </li>            <li ng-repeat='stu in data | young:0'>                <span>{{$index+1}}</span>                <span>{{stu.name}}</span>                <span>{{stu.gender}}</span>                <span>{{stu.age}}</span>                <span>{{stu.score}}</span>            </li>        </ul>    </div>    <script type="text/javascript">        var app=angular.module('myapp',[]);        app.controller('myController',['$scope',function($scope){            $scope.data=[                {name:'王二',gender:'女',age:24,score:95},                {name:'张三',gender:'女',age:27,score:87},                {name:'李四',gender:'女',age:28,score:87},                {name:'赵五',gender:'男',age:28,score:86},                {name:'刘六',gender:'男',age:23,score:97}            ];        }]);        app.filter('young',function(){            return function(e,type){                var _out=[];                var _gender=type?'男':'女';                for(var i=0;i<5;i++){                    if(e[i].age>22 && e[i].age<28 && e[i].gender==_gender){                        _out.push(e[i]);                    }                    console.log(_out);                }                return _out;            }        })    </script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

这里定义了一个名为’young’的自定义指令，指令中定义了两个形参e 和 type，前者e参数在调用的时候，将会被需要过滤的数据自动注入，在这里代表的是$scope.data，后者yupe接受young指令后的参数，在这里指得是0，type?'男':'女'表示type=0就选女，否则就选男，这里选的是’女’，然后再判断age>22&&age<28，将所有的结果集合返回。
这里最终页面将显示$scope.data中的前两项。

4. 过滤器的具体应用

4.1表头排序

表头排序是指在使用列表方式显示数据时，将根据用户点击的那一列数据的属性值进行排序，默认为升序排列，再次单击则变为降序

 <div ng-controller='myController'>        <ul>            <li>                <span>序号</span>                <span ng-click="title='name';desc=!desc">姓名</span>                <span ng-click="title='gender';desc=!desc">性别</span>                <span ng-click="title='age';desc=!desc">年龄</span>                <span ng-click="title='score';desc=!desc">分数</span>            </li>            <li ng-repeat="stu in data | orderBy:title:desc">                <span>{{$index+1}}</span>                <span>{{stu.name}}</span>                <span>{{stu.gender}}</span>                <span>{{stu.age}}</span>                <span>{{stu.score}}</span>            </li>        </ul>    </div>    <script type="text/javascript">        var app=angular.module('myapp',[]);        app.controller('myController',['$scope',function($scope){            $scope.title='name';            $scope.desc=0;            $scope.data=[                {name:'王二',gender:'女',age:24,score:95},                {name:'张三',gender:'女',age:27,score:87},                {name:'李四',gender:'女',age:28,score:87},                {name:'赵五',gender:'男',age:28,score:86},                {name:'刘六',gender:'男',age:23,score:97}            ];        }]);    </script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

4.2 字符查找

调用filter过滤器，查找与过滤器冒号后字符参数相匹配的数据。
还是上面4.1的内容，增加输入框元素：
<input type='text' ng-model='key' />
将过滤表达式换成:
<li ng-repeat="stu in data | filter:{name:key}">

作用域

1. 作用域的特点

1.1 具体来说，作用域包括以下3个比较显著特点：

提供了一个$watch 方法来监听数据模型的变化，ng-model的双向绑定，就是由其支撑。
提供了$apply 方法，为各种类型的数据模型改变提供支撑，例如，通过在页面视图中的ng-click指令，执行控制器中的代码。
提供了执行的环境，一个表达式必须在拥有该表达式属性的作用域中执行才更合适，作用域通过$scope 对象，使所有的表达式都拥有对应的执行环境，也就是执行上下文。

1.2 $watch的使用

    <div ng-controller='myController'>        <div>            <input type="text" ng-model='name' />        </div>        <div>累计变化次数：{{count}}</div>    </div>    <script type="text/javascript">    var app=angular.module('myapp',[]);    app.controller('myController',['$scope',function($scope){        $scope.count=0;        $scope.name='';        $scope.$watch('name',function(){            $scope.count++;        })    }])    </script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$watch方法对$scope 中的name属性进行监视，当该属性发生变化时，将$scope 中的count属性值累加1.
其具体原因在于，每次对已绑定ng-model指令的name进行修改时，内部的$digest方法就会自动运行一次，检测name属性是否与上次$digest运行时的内容保持一直，如果不一致，则执行$watch绑定的函数。

2. 作用域的层级

顶级作用域只有一个，下面的子作用域可以存在多个，子作用域可以继承父作用域的全部属性和方法，同级子作用域间不可互相访问各自的属性和方法。

    <div ng-controller="parentController">        <ul ng-controller="childfirstController">            <li>{{childFirst}}</li>        </ul>        <ul ng-controller="childsecondController">            {{childFirst}}        </ul>    </div>    <div ng-controller='myController'>        <div>            <input type="text" ng-model='name' />        </div>        <div>累计变化次数：{{count}}</div>    </div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

parentController是父级控制器，childfirstController 和 childsecondController是子级控制器，子级控制器可以直接继承父级控制器作用域中通过$scope添加的属性和方法，如果父级控制器又通过$rootScope添加了属性和方法，那么子级作用域将首先访问$scope，如果没有找打结果，然后继续向上再访问$rootScope。

3. 作用域的事件

有两种方式可以实现作用域之间的通信；

服务
事件

要使用事件，必须调用Angular中提供的两个方法：$broadcast 和 $emit。
其中，$broadcast 的功能是将事件从父级作用域传播至子级作用域，调用方式如下：
$broadcast(evventname,data)

而$emit 的功能则正好相反，是将事件从子级作用域传播至父级作用域,调用方式如下：
$emit(eventname,data)

使用$on方法来在作用域中监控传播来的事件并获取相应的数据,调用方式如下：

    $on(eventname,function(event,data){        //处理传播事件的代码    })1
2
3

$emit只能向parent controller传递event与data
$broadcast只能向child controller传递event与data
$on用于接收event与data
emit和broadcast可以传多个参数，$on也可以接收多个参数。

其中，eventname为需要监控的传播事件名称，event为时间传播过程中自带的特征，该特征包括以下几个重要的属性：

属性名称功能说明event.targetScope返回发出或者传播原始事件的作用域名称event.currentScope返回正在接收传播事件的作用域名称event.name传播事件的名称event.stopPropagation防止事件进行冒泡操作的函数（这只适用于使用$emit发出的事件）event.preventDefault阻止代码事件的发生event.defaultPrevented阻如果调用了preventDefault，则为true，否则为false

查看原文>>

0 0