美文网首页AngularJS实战笔记我爱编程
Angular的过滤器和作用域

Angular的过滤器和作用域

作者: 阿振_sc | 来源:发表于2016-06-22 22:35 被阅读258次

    在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方法来监听数据模型的变化，ng-model指令就是通过该方法进行数据的监听，只要有一端发生变化，则另一端自动进行同步更新

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

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

    下面的示例说明$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

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

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

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

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

    相关文章

      网友评论

        本文标题：Angular的过滤器和作用域

        本文链接：https://www.haomeiwen.com/subject/jzendttx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        AngularJS实战笔记

        我爱编程

        关于我们|服务条款|联系我们|Angular的过滤器和作用域|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！