AngularJS实战笔记我爱编程

Angular的过滤器和作用域

2016-06-22  本文已影响258人  阿振_sc

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

过滤器

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

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

{{8.88 | currency}}  // $8.88

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

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

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

{{8.88 | number : 1}}

排序方式过滤

<!doctype html>
<html ng-app="MyApp">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap.min.css">
  <style>
    body {padding: 15px;}
  </style>
</head>
<body>

<div ng-controller="stuController">
  <table class="table table-bordered table-responsive table-hover">
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
      <th>成绩</th>
    </tr>
    <!-- 在下面的ng-repeat指令后通过管道符'|'添加排序过滤器 -->
    <tr ng-repeat="stu in data | orderBy: 'score'">
      <td>{{$index+1}}</td>
      <td>{{stu.name}}</td>
      <td>{{stu.sex}}</td>
      <td>{{stu.age}}</td>
      <td>{{stu.score}}</td>
    </tr>
  </table>
</div>

<script src="./angular.min.js"></script>
<script>
  var stulist = angular.module('MyApp', []);
  stulist.controller('stuController', ['$scope', function($scope){
    $scope.bold = 'bold';
    $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}
    ];
  }]);
</script>
</body>
</html>

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

<tr ng-repeat="stu in data | orderBy: '-score'">

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

<tr ng-repeat="stu in data | orderBy: '-score' | limitTo: 3">
<!-- 只显示3列数据 -->

匹配方式过滤

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

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

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

<!-- 在data数据中找到包含80的记录 -->
{{data | filter: 80}}

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

{{数据 | filter: 对象}}

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

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

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

<!doctype html>
<html ng-app="MyApp">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap.min.css">
  <style>
    body {padding: 15px;}
  </style>
</head>
<body>

<div ng-controller="stuController">
  <table class="table table-bordered table-responsive table-hover">
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
      <th>成绩</th>
    </tr>
    <!-- 调用findescore函数对数据进行过滤 -->
    <tr ng-repeat="stu in data | filter: findscore">
      <td>{{$index+1}}</td>
      <td>{{stu.name}}</td>
      <td>{{stu.sex}}</td>
      <td>{{stu.age}}</td>
      <td>{{stu.score}}</td>
    </tr>
  </table>
</div>

<script src="./angular.min.js"></script>
<script>
  var stulist = angular.module('MyApp', []);
  stulist.controller('stuController', ['$scope', function($scope){
    $scope.bold = 'bold';
    $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}
    ];
    // 定义过滤函数，筛选成绩大于85且小于90的数据
    $scope.findscore = function(e) {
      return e.score > 85 && e.score < 90;
    }
  }]);
</script>
</body>
</html>

自定义过滤器

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

接上面的例子，我们在模块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代码：

<!-- 也可以将young这个过滤器的参数换成true或false -->
<tr ng-repeat="stu in data | young: 0">
  <td>{{$index+1}}</td>
  <td>{{stu.name}}</td>
  <td>{{stu.sex}}</td>
  <td>{{stu.age}}</td>
  <td>{{stu.score}}</td>
</tr>

过滤器的应用

表头排序

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

html：

<table class="table table-bordered table-responsive table-hover">
    <tr>
        <!-- 在每个表头中增加ng-click事件 -->
      <th>序号</th>
      <th ng-click="title='name'; desc=!desc">姓名</th>
      <th ng-click="title='sex'; desc=!desc">性别</th>
      <th ng-click="title='age'; desc=!desc">年龄</th>
      <th ng-click="title='score'; desc=!desc">成绩</th>
    </tr>
    <!-- 为数据增加排序过滤器 -->
    <tr ng-repeat="stu in data | orderBy: title: desc">
      <td>{{$index+1}}</td>
      <td>{{stu.name}}</td>
      <td>{{stu.sex}}</td>
      <td>{{stu.age}}</td>
      <td>{{stu.score}}</td>
    </tr>
</table>

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

<!-- 在页面中增加input，用于输入过滤关键字 -->
<input type="text" ng-model="key" placeholder="请输入关键字">

<!-- 在循环中增加过滤器filter，对用户输入进行匹配 -->
<tr ng-repeat="stu in data | orderBy: title: desc | filter: {name:key}">

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

作用域概述

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

作用域特点

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

<!doctype html>
<html ng-app="MyApp">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap.min.css">
</head>
<body ng-controller="MyController">

<div>
  <input type="text" ng-model="name" placeholder="请输入姓名">
</div>
<div>
  累计变化次数: {{count}}
</div>

<script src="./angular.min.js"></script>
<script>
  var myapp = angular.module('MyApp', []);
  myapp.controller('MyController', ['$scope', function($scope){
    $scope.name = '';
    $scope.count = 0;
    // 通过 $watch 方法监听name的变化次数
    $scope.$watch('name', function(){
      $scope.count++;
    })
  }])
</script>
</body>
</html>

作为数据模型的作用域

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

作用域的层级和事件

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

作用域的层级

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

<!doctype html>
<html ng-app="MyApp">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap.min.css">
</head>
<body>

<div ng-controller="parentController">
  <div ng-controller="childController_a">
    {{parent_name}}, 我是第一个子层控制器的内容
  </div>
  <div ng-controller="childController_b">
    {{parent_name}}, 我是第二个子层控制器的内容
  </div>
</div>

<script src="./angular.min.js"></script>
<script>
  var myapp = angular.module('MyApp', []);
  // 在父级控制器中定义parent_name变量
  myapp.controller('parentController', ['$scope', function($scope){
    $scope.parent_name = 'Hello';
  }]);
  // 自动继承父级作用域中的属性
  myapp.controller('childController_a', ['$scope', function($scope){
    // todo...
  }]);
  // 自动继承父级作用域中的属性
  myapp.controller('childController_b', ['$scope', function($scope){
    // todo...
  }]);
</script>
</body>
</html>

作用域事件的传播

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

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

(1) 服务(service)

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

(2) 事件(event)

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

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

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

猜你喜欢

热点阅读