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}}

排序方式过滤

<!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) {
    // 接收传播事件的处理代码
})
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,723评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,485评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,998评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,323评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,355评论 5赞 374
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,079评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,389评论 3赞 400
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,019评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,519评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,971评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,100评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,738评论 4赞 324
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,293评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,289评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,517评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,547评论 2赞 354
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,834评论 2赞 345

推荐阅读更多精彩内容

  • Angular学习笔记（2）—过滤器
    过滤器用来格式化需要展示给用户的数据。AngularJS有很多实用的内置过滤器，同时也提供了方便的途径可以自己创建...
    oWSQo阅读 1,085评论 0赞 5
  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 134,600评论 18赞 139
  • angular转发
    AngularJS是什么？AngularJs（后面就简称ng了）是一个用于设计动态web应用的结构框架。首先，它是...
    200813阅读 1,588评论 0赞 3
  • Angular
    angular有哪些牛逼特性呢？ 1、模板机制2、双向数据绑定3、模块4、指令5、依赖注入6、路由7、过滤器 An...
    Man僵小鱼阅读 1,142评论 0赞 6
  • 第五届金融与计算论坛——养老金融暨职业年金分论坛宣言
    广州·2016年12月4日 北京济安金信科技有限公司副总裁兼养老保险事业部总经理 闫安 ...
    闫安阅读 664评论 0赞 2