Angular的過濾器和作用域

在Angular中，過濾器的功能主要是格式化數(shù)據(jù)表達式，且可以自定義過濾器。作用域(scope)主要服務(wù)于頁面模板，在控制器和頁面中起橋梁作用，保存模板中的數(shù)據(jù)對象，為模板中的元素提供方法和屬性

過濾器

在Angular中，過濾器主要有三種形式，它們分別是：

(1) 單個過濾器，如：{{表達式 | 過濾器名}}

{{8.88 | currency}}  // $8.88

(2) 多個過濾器，如：{{表達式 | 過濾器名1 | 過濾器名2 | ...}}

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

(3) 帶參數(shù)過濾器,如：{{表達式 | 過濾器名1 : 參數(shù)1 : 參數(shù)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指令綁定數(shù)據(jù)，調(diào)用orderBy過濾器對分數(shù)列進行排序，orderBy排序過濾器后面帶了參數(shù)score，默認以score為標(biāo)準(zhǔn)進行升序排列，如果要降序排序，在score前面加個-即可

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

我們還可以繼續(xù)在后面加上過濾器，如limitTo,它的作用是限制列表顯示列數(shù)

<tr ng-repeat="stu in data | orderBy: '-score' | limitTo: 3">
<!-- 只顯示3列數(shù)據(jù) -->

匹配方式過濾

匹配方式過濾是將字符參數(shù)與列表中的各個成員屬性值相匹配，如果包含則顯示，匹配時不區(qū)分大小寫。它有三種形式：

(1) 通過filter過濾器直接匹配包含字符參數(shù)的數(shù)據(jù)

{{數(shù)據(jù) | filter: '匹配字符'}}

<!-- 在data數(shù)據(jù)中找到包含80的記錄 -->
{{data | filter: 80}}

(2) 在字符參數(shù)中使用對象形式匹配指定屬性的數(shù)據(jù)

{{數(shù)據(jù) | filter: 對象}}

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

(3) 在字符參數(shù)中使用自定義函數(shù)匹配相應(yīng)數(shù)據(jù)

{{數(shù)據(jù) | filter: 函數(shù)名稱}}

<!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>
    <!-- 調(diào)用findescore函數(shù)對數(shù)據(jù)進行過濾 -->
    <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}
    ];
    // 定義過濾函數(shù)，篩選成績大于85且小于90的數(shù)據(jù)
    $scope.findscore = function(e) {
      return e.score > 85 && e.score < 90;
    }
  }]);
</script>
</body>
</html>

自定義過濾器

自定義過濾器需要在頁面模塊中注冊一個過濾器的構(gòu)造方法，該方法將返回一個以輸入值為首個參數(shù)的函數(shù)，在函數(shù)體中實現(xiàn)過濾器的功能

接上面的例子，我們在模塊stulist上自定義一個過濾器，它的作用是篩選出年齡在22到28之間的，且性別是被指定的數(shù)據(jù)

JS代碼：

/* 實現(xiàn)自定義過濾器,在模塊上使用filter方法,第1個參數(shù)是過濾器名,第二個是實現(xiàn)函數(shù)
 * 在實現(xiàn)里直接返回一個函數(shù)
 * 過濾器篩選出年齡在22和28之間的,且性別被指定的數(shù)據(jù)
 */
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這個過濾器的參數(shù)換成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>

過濾器的應(yīng)用

表頭排序

表頭排序是指在使用列表方式顯示數(shù)據(jù)時，用戶如果單擊列表某列的表頭元素，那么列表中的全部數(shù)據(jù)將會自動按該列的屬性值自動排序，默認為升序排列，再次單擊會變?yōu)榻敌蚺帕?/p>

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>
    <!-- 為數(shù)據(jù)增加排序過濾器 -->
    <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;
}]);

字符查找

字符查找是指通過調(diào)用Angular中的filter過濾器，查找與過濾器冒號后字符參數(shù)相匹配的數(shù)據(jù)，如果匹配則顯示，否則不顯示

在上面的例子中，我們首先增加一個用于輸入過濾關(guān)鍵字的input

<!-- 在頁面中增加input，用于輸入過濾關(guān)鍵字 -->
<input type="text" ng-model="key" placeholder="請輸入關(guān)鍵字">

<!-- 在循環(huán)中增加過濾器filter，對用戶輸入進行匹配 -->
<tr ng-repeat="stu in data | orderBy: title: desc | filter: {name:key}">

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

作用域概述

$scope對象實質(zhì)上是一個作用域?qū)ο?，它能存儲?shù)據(jù)模型，為表達式提供上下文環(huán)境和監(jiān)聽表達式的變化且傳播時間，是視圖與控制器之間的橋梁

作用域特點

  • 它提供了一個$watch方法來監(jiān)聽數(shù)據(jù)模型的變化，ng-model指令就是通過該方法進行數(shù)據(jù)的監(jiān)聽，只要有一端發(fā)生變化，則另一端自動進行同步更新

  • 它提供了一個$apply方法，為各種烈性的數(shù)據(jù)模型改變提供支撐，將它們引入到Angular可控制的范圍中。

  • 它為表達式提供了執(zhí)行的環(huán)境，一個表達式必須在擁有該表達式屬性的作用域中執(zhí)行才更加合適

下面的示例說明$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>
  累計變化次數(shù): {{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 方法監(jiān)聽name的變化次數(shù)
    $scope.$watch('name', function(){
      $scope.count++;
    })
  }])
</script>
</body>
</html>

作為數(shù)據(jù)模型的作用域

作用域是控制器與視圖的橋梁，也是視圖和指令的橋梁

作用域的層級和事件

作用域綁定頁面元素后，便依據(jù)元素的層次關(guān)系形成了自己的層級關(guān)系，在這些層級關(guān)系中，他們可以通過事件的傳播進行數(shù)據(jù)的通信

作用域的層級

作用域擁有自己的層級，且它有一個頂級作用域$rootScope，而下面的子級作用域可以創(chuàng)建多個，子級作用域可以繼承父級作用域中的全部屬性和方法，但同級作用域卻不行。

<!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}}, 我是第一個子層控制器的內(nèi)容
  </div>
  <div ng-controller="childController_b">
    {{parent_name}}, 我是第二個子層控制器的內(nèi)容
  </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中，作用域間有非常清晰的層次結(jié)構(gòu)關(guān)系，最頂層的是rootscope作用域，其余的都是在它基礎(chǔ)之上進行分支和嵌套的。

那么，我們有兩種方法可以實現(xiàn)作用域之間的通信：

(1) 服務(wù)(service)

通過在各作用域之間創(chuàng)建一個單例的服務(wù)，由該服務(wù)來處理各個作用域間的數(shù)據(jù)通信

(2) 事件(event)

通過作用域之間的事件也可以進行數(shù)據(jù)通信，Angular提供了兩個方法$broadcasted和$emitted

  • $broadcasted方法將事件從父級作用域傳播至子級作用域，它有兩個參數(shù)，eventname，表示事件名稱，data表示傳播過程中攜帶的數(shù)據(jù)

  • $emitted方法將事件從子級作用域傳播至父級作用域，與上面的方法相同。

除了上面的兩個方法外，還需要調(diào)用$on方法，在作用域中監(jiān)控傳播來的事件并獲取相應(yīng)的數(shù)據(jù)。

$on(eventname, function(event, data) {
    // 接收傳播事件的處理代碼
})
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 過濾器用來格式化需要展示給用戶的數(shù)據(jù)。AngularJS有很多實用的內(nèi)置過濾器，同時也提供了方便的途徑可以自己創(chuàng)建...
    oWSQo閱讀 1,205評論 0贊 5
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,536評論 19贊 139
  • AngularJS是什么？AngularJs（后面就簡稱ng了）是一個用于設(shè)計動態(tài)web應(yīng)用的結(jié)構(gòu)框架。首先，它是...
    200813閱讀 1,762評論 0贊 3
  • angular有哪些牛逼特性呢？ 1、模板機制2、雙向數(shù)據(jù)綁定3、模塊4、指令5、依賴注入6、路由7、過濾器 An...
    Man僵小魚閱讀 1,188評論 0贊 6
  • 廣州·2016年12月4日 北京濟安金信科技有限公司副總裁兼養(yǎng)老保險事業(yè)部總經(jīng)理 閆安 ...
    閆安閱讀 706評論 0贊 2

友情鏈接更多精彩內(nèi)容