Angular的过滤器和作用域

在Angular中，过滤器的功能主要是格式化数据表达式，且可以自定义过滤器。作用域(scope)主要服务于页面模板，在控制器和页面中起桥梁作用，保存模板中的数据对象，为模板中的元素提供方法和属性

过滤器

在Angular中，过滤器主要有三种形式，它们分别是：

(1) 单个过滤器，如：{{表达式 | 过滤器名}}

{{8.88 | currency}}  // $8.88

(2) 多个过滤器，如：{{表达式 | 过滤器名1 | 过滤器名2 | ...}}

{{8.88 | currency | filter | ...}}

(3) 带参数过滤器,如：{{表达式 | 过滤器名1 : 参数1 : 参数2 : ...}}

{{8.88 | number : 1}}

排序方式过滤

  
  
  
  




  

    

      
序号
      
姓名
      
性别
      
年龄
      
成绩
    
    
    

      
{{$index+1}}
      
{{stu.name}}
      
{{stu.sex}}
      
{{stu.age}}
      
{{stu.score}}
    
  

上面的示例中视图模板通过ng-repeat指令绑定数据，调用orderBy过滤器对分数列进行排序，orderBy排序过滤器后面带了参数score，默认以score为标准进行升序排列，如果要降序排序，在score前面加个-即可

我们还可以继续在后面加上过滤器，如limitTo,它的作用是限制列表显示列数

匹配方式过滤

匹配方式过滤是将字符参数与列表中的各个成员属性值相匹配，如果包含则显示，匹配时不区分大小写。它有三种形式：

(1) 通过filter过滤器直接匹配包含字符参数的数据

{{数据 | filter: '匹配字符'}}

{{data | filter: 80}}

(2) 在字符参数中使用对象形式匹配指定属性的数据

{{数据 | filter: 对象}}

{{data | filter: {score: 80}}}

(3) 在字符参数中使用自定义函数匹配相应数据

{{数据 | filter: 函数名称}}

  
  
  
  




  

    

      
序号
      
姓名
      
性别
      
年龄
      
成绩
    
    
    

      
{{$index+1}}
      
{{stu.name}}
      
{{stu.sex}}
      
{{stu.age}}
      
{{stu.score}}
    
  

自定义过滤器

自定义过滤器需要在页面模块中注册一个过滤器的构造方法，该方法将返回一个以输入值为首个参数的函数，在函数体中实现过滤器的功能

接上面的例子，我们在模块stulist上自定义一个过滤器，它的作用是筛选出年龄在22到28之间的，且性别是被指定的数据

JS代码：

/* 实现自定义过滤器,在模块上使用filter方法,第1个参数是过滤器名,第二个是实现函数
 * 在实现里直接返回一个函数
 * 过滤器筛选出年龄在22和28之间的,且性别被指定的数据
 */
stulist.filter('young', function(){
return function(e, type) {
  var _out = [];
  var _sex = type ? '男' : '女';
  for(var i=0; i< e.length; i++) {
    if(e[i].age > 22 && e[i].age < 28 && e[i].sex == _sex) {
      _out.push(e[i]);
    }
  }
  return _out;
}
});

html代码：

  {{$index+1}}
  {{stu.name}}
  {{stu.sex}}
  {{stu.age}}
  {{stu.score}}

过滤器的应用

表头排序

表头排序是指在使用列表方式显示数据时，用户如果单击列表某列的表头元素，那么列表中的全部数据将会自动按该列的属性值自动排序，默认为升序排列，再次单击会变为降序排列

html：

    

        
      
序号
      
姓名
      
性别
      
年龄
      
成绩
    
    
    

      
{{$index+1}}
      
{{stu.name}}
      
{{stu.sex}}
      
{{stu.age}}
      
{{stu.score}}
    

javascript:

var stulist = angular.module('MyApp', []);
stulist.controller('stuController', ['$scope', function($scope){
    $scope.data = [
      {name: '张明明', sex: '女', age: 24, score: 95},
      {name: '李青思', sex: '女', age: 27, score: 87},
      {name: '刘晓华', sex: '男', age: 28, score: 86},
      {name: '陈忠忠', sex: '男', age: 23, score: 97}
    ];
    $scope.title = 'name';
    $scope.desc = 0;
}]);

字符查找

字符查找是指通过调用Angular中的filter过滤器，查找与过滤器冒号后字符参数相匹配的数据，如果匹配则显示，否则不显示

在上面的例子中，我们首先增加一个用于输入过滤关键字的input

// 在js代码中初始化key的值
$scope.key = '';

作用域概述

$scope对象实质上是一个作用域对象，它能存储数据模型，为表达式提供上下文环境和监听表达式的变化且传播时间，是视图与控制器之间的桥梁

作用域特点

• 它提供了一个$watch方法来监听数据模型的变化，ng-model指令就是通过该方法进行数据的监听，只要有一端发生变化，则另一端自动进行同步更新

• 它提供了一个$apply方法，为各种烈性的数据模型改变提供支撑，将它们引入到Angular可控制的范围中。

• 它为表达式提供了执行的环境，一个表达式必须在拥有该表达式属性的作用域中执行才更加合适

下面的示例说明$watch如何工作

  
  
  




  


  累计变化次数: {{count}}

作为数据模型的作用域

作用域是控制器与视图的桥梁，也是视图和指令的桥梁

作用域的层级和事件

作用域绑定页面元素后，便依据元素的层次关系形成了自己的层级关系，在这些层级关系中，他们可以通过事件的传播进行数据的通信

作用域的层级

作用域拥有自己的层级，且它有一个顶级作用域$rootScope，而下面的子级作用域可以创建多个，子级作用域可以继承父级作用域中的全部属性和方法，但同级作用域却不行。

  
  
  




  

    {{parent_name}}, 我是第一个子层控制器的内容
  
  

    {{parent_name}}, 我是第二个子层控制器的内容
  

作用域事件的传播

在Angular中，作用域间有非常清晰的层次结构关系，最顶层的是rootscope作用域，其余的都是在它基础之上进行分支和嵌套的。

那么，我们有两种方法可以实现作用域之间的通信：

(1) 服务(service)

通过在各作用域之间创建一个单例的服务，由该服务来处理各个作用域间的数据通信

(2) 事件(event)

通过作用域之间的事件也可以进行数据通信，Angular提供了两个方法$broadcasted和$emitted

• $broadcasted方法将事件从父级作用域传播至子级作用域，它有两个参数，eventname，表示事件名称，data表示传播过程中携带的数据

• $emitted方法将事件从子级作用域传播至父级作用域，与上面的方法相同。

除了上面的两个方法外，还需要调用$on方法，在作用域中监控传播来的事件并获取相应的数据。

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