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

过滤器(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个比较显著特点：

1. 提供了一个$watch 方法来监听数据模型的变化，ng-model的双向绑定，就是由其支撑。
2. 提供了$apply 方法，为各种类型的数据模型改变提供支撑，例如，通过在页面视图中的ng-click指令，执行控制器中的代码。
3. 提供了执行的环境，一个表达式必须在拥有该表达式属性的作用域中执行才更合适，作用域通过$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. 作用域的事件

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

1. 服务
2. 事件

  要使用事件，必须调用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

查看原文>>