欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJS 過(guò)濾器（自帶和自建）詳解

 更新時(shí)間：2016年09月19日 17:19:49   作者：Ruby$  
這篇文章主要介紹了AngularJS 過(guò)濾器（自帶和自建）詳解的相關(guān)資料,需要的朋友可以參考下

過(guò)濾器用來(lái)格式化需要展示給用戶(hù)的數(shù)據(jù)。AngularJS有很多實(shí)用的內(nèi)置過(guò)濾器，同時(shí)也提
供了方便的途徑可以自己創(chuàng)建過(guò)濾器。

在HTML中的模板綁定符號(hào){{ }}內(nèi)通過(guò)|符號(hào)來(lái)調(diào)用過(guò)濾器。例如:{{value|lowercase}}//將值轉(zhuǎn)換成小寫(xiě)

在JavaScript代碼中可以通過(guò)$filter來(lái)調(diào)用過(guò)濾器

例：

　app.controller(‘DemoController‘, [‘$scope‘, ‘$filter‘,
　　function($scope, $filter) {
　　$scope.name = $filter(‘lowercase‘)(‘Ruby‘);
　　}]);

以HTML的形式使用過(guò)濾器時(shí)，如果需要傳遞參數(shù)給過(guò)濾器，只要在過(guò)濾器名字后面加冒號(hào)
即可。如果有多個(gè)參數(shù)，可以在每個(gè)參數(shù)后面都加入冒號(hào)。

例如

　　{{0.23145|number:3}}

顯示值:0.231//數(shù)值過(guò)濾器 可以限制小數(shù)點(diǎn)后的位數(shù)（在過(guò)濾器后寫(xiě)上2,將2作為參數(shù)傳遞給過(guò)濾器)

可以用|符號(hào)作為分割符來(lái)同時(shí)使用多個(gè)過(guò)濾器

一：下面介紹AngularJS提供的內(nèi)置過(guò)濾器：

 1.currecy過(guò)濾器可以將一個(gè)數(shù)值格式化為貨幣格式。用{{ 50| currency }}來(lái)將50轉(zhuǎn)化成貨幣格式。
currecy過(guò)濾器允許我們自己設(shè)置貨幣符號(hào)。默認(rèn)情況下會(huì)采用客戶(hù)端所處區(qū)域的貨幣符號(hào)，
但是也可以自定義貨幣符號(hào)。

2.date過(guò)濾器可以將日期格式化成需要的格式。AngularJS中內(nèi)置了幾種日期格式，如果沒(méi)有

指定使用任何格式，默認(rèn)會(huì)采用mediumDate格式

下面是內(nèi)置的支持本地化的日期格式：

{{ today | date:‘medium‘ }} <!-- Aug 09, 2013 12:09:02 PM -->
{{ today | date:‘short‘ }} <!-- 8/9/1312:09PM -->
{{ today | date:‘fullDate‘ }} <!-- Thursday, August 09, 2013 -->
{{ today | date:‘longDate‘ }} <!-- August 09, 2013 -->
{{ today | date:‘mediumDate‘ }}<!-- Aug 09, 2013 -->
{{ today | date:‘shortDate‘ }} <!-- 8/9/13 -->
{{ today | date:‘mediumTime‘ }}<!-- 12:09:02 PM -->
{{ today | date:‘shortTime‘ }} <!-- 12:09 PM -->

 年份格式化

四位年份：{{ today | date:‘yyyy‘ }} <!-- 2013 -->
兩位年份：{{ today | date:‘yy‘ }} <!-- 13 -->
一位年份：{{ today | date:‘y‘ }} <!-- 2013 -->

月份格式化

英文月份：{{ today | date:‘MMMM‘ }} <!-- August -->
英文月份簡(jiǎn)寫(xiě)：{{ today | date:‘MMM‘ }} <!-- Aug -->
數(shù)字月份：{{ today |date:‘MM‘ }} <!-- 08 -->
一年中的第幾個(gè)月份：{{ today |date:‘M‘ }} <!-- 8 -->

日期格式化

數(shù)字日期：{{ today|date:‘dd‘ }} <!-- 09 -->

一個(gè)月中的第幾天：{{ today | date:‘d‘ }} <!-- 9 -->

英文星期：{{ today | date:‘EEEE‘ }} <!-- Thursday -->
英文星期簡(jiǎn)寫(xiě)：{{ today | date:‘EEE‘ }} <!-- Thu -->

小時(shí)格式化

24小時(shí)制數(shù)字小時(shí)：{{today|date:‘HH‘}} <!--00-->
一天中的第幾個(gè)小時(shí)：{{today|date:‘H‘}} <!--0-->
12小時(shí)制數(shù)字小時(shí)：{{today|date:‘hh‘}} <!--12-->
上午或下午的第幾個(gè)小時(shí)：{{today|date:‘h‘}} <!--12-->

分鐘格式化

數(shù)字分鐘數(shù)：{{ today | date:‘mm‘ }} <!-- 09 -->
一個(gè)小時(shí)中的第幾分鐘：{{ today | date:‘m‘ }} <!-- 9 -->

秒數(shù)格式化

數(shù)字秒數(shù)：{{ today | date:‘ss‘ }} <!-- 02 -->
一分鐘內(nèi)的第幾秒：{{ today | date:‘s‘ }} <!-- 2 -->
毫秒數(shù)：{{ today | date:‘.sss‘ }} <!-- .995 -->

字符格式化

上下午標(biāo)識(shí)：{{ today | date:‘a(chǎn)‘ }} <!-- AM -->
四位時(shí)區(qū)標(biāo)識(shí)：{{ today | date:‘Z‘ }} <!--- 0700 -->

自定義日期格式示例：

{{ today | date:‘MMMd, y‘ }} <!-- Aug9, 2013 -->
{{ today | date:‘EEEE, d, M‘ }} <!-- Thursday, 9, 8-->
{{ today | date:‘hh:mm:ss.sss‘ }} <!-- 12:09:02.995 -->

3.filter

  filter過(guò)濾器可以從給定數(shù)組中選擇一個(gè)子集，并將其生成一個(gè)新數(shù)組返回。這個(gè)過(guò)濾器通常用來(lái)過(guò)濾需要進(jìn)行展示的元素。

  這個(gè)過(guò)濾器的第一個(gè)參數(shù)可以是字符串、對(duì)象或是一個(gè)用來(lái)從數(shù)組中選擇元素的函數(shù)。

 1)傳入的參數(shù)是字符串時(shí)

    返回所有包含這個(gè)字符串的元素。如果我們想返回不包含該字符串的元素，在參數(shù)前加!符號(hào)。

   例：

      {{ [‘Bri‘,‘Lerner‘,‘Likes‘,‘To‘,‘Eat‘,‘Pizza‘] | filter:‘e‘ }}

　　<!-- ["Lerner","Likes","Eat"] -->

2)傳入的參數(shù)是對(duì)象

   AngularJS會(huì)將待過(guò)濾對(duì)象的屬性同這個(gè)對(duì)象中的同名屬性進(jìn)行比較，如果屬性值是字符串就會(huì)判斷是否包含該字符串。如果我們希望對(duì)全部屬性都進(jìn)行對(duì)比，可以將$當(dāng)作鍵名。

例：

　{{ [{
　　　　　　‘name‘: ‘Ari‘,
　　　　　　‘City‘: ‘San Francisco‘,
　　　　　　‘favorite food‘: ‘Pizza‘
　　　　},{
　　　　　　‘name‘: ‘Nate‘,
　　　　　　‘City‘: ‘San Francisco‘,
　　　　　　‘favorite food‘: ‘indian food‘
　　}] | filter:{‘favorite food‘: ‘Pizza‘} }}
<!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] -->

3)函數(shù)

   對(duì)每個(gè)元素都執(zhí)行這個(gè)函數(shù)，返回非假值的元素會(huì)出現(xiàn)在新的數(shù)組中并返回。

  自定義函數(shù)進(jìn)行過(guò)濾（在這個(gè)例子中函數(shù)定義在$scope上）：

{{ [‘Ari‘,‘likes‘,‘to‘,‘travel‘] | filter:isCapitalized }}

　<!-- ["Ari"] -->
 isCapitalized函數(shù)的功能是根據(jù)首字母是否為大寫(xiě)返回true或false，具體如下所示：
 $scope.isCapitalized = function(str) {
 return str[0] == str[0].toUpperCase();
 };

4.json

json過(guò)濾器可以將一個(gè)JSON或JavaScript對(duì)象轉(zhuǎn)換成字符串。這種轉(zhuǎn)換對(duì)調(diào)試非常有幫助：
　　{{ {‘name‘: ‘Ari‘, ‘City‘: ‘SanFrancisco‘} | json }}
　　<!--
　　　　{
　　　　　　"name": "Ari",
　　　　　　"City": "San Francisco"
　　　　}
　　-->

5.limitTo

　limitTo過(guò)濾器會(huì)根據(jù)傳入的參數(shù)生成一個(gè)新的數(shù)組或字符串，新的數(shù)組或字符串的長(zhǎng)度取決于傳入的參數(shù)，通過(guò)傳入?yún)?shù)的正負(fù)值來(lái)控制從前面還是從后面開(kāi)始截取。(如果傳入的長(zhǎng)度值大于被操作數(shù)組或字符串的長(zhǎng)度，那么整個(gè)數(shù)組或字符串都會(huì)被返回。)

例子：

 {{ San Francisco is very cloudy | limitTo:3 }}

 <!-- San -->

 {{ San Francisco is very cloudy | limitTo:-6 }}

 <!-- cloudy -->

 對(duì)數(shù)組也可以進(jìn)行同樣的操作。返回?cái)?shù)組的第一個(gè)元素：

　　{{ [‘a(chǎn)‘,‘b‘,‘c‘,‘d‘,‘e‘,‘f‘] | limitTo:1 }}
　　<!-- ["a"] -->

6 lowercase

  lowercase過(guò)濾器將字符串轉(zhuǎn)為小寫(xiě)。

7.number

  number過(guò)濾器將數(shù)字格式化成文本。它的第二個(gè)參數(shù)是可選的，用來(lái)控制小數(shù)點(diǎn)后截取的位數(shù)。(如果傳入了一個(gè)非數(shù)字字符，會(huì)返會(huì)空字符串。)

8.orderBy

  orderBy過(guò)濾器可以用表達(dá)式對(duì)指定的數(shù)組進(jìn)行排序。

  orderBy可以接受兩個(gè)參數(shù)，第一個(gè)是必需的，第二個(gè)是可選的。

  第一個(gè)參數(shù)是用來(lái)確定數(shù)組排序方向的謂詞。

 下面分情況討論第一個(gè)參數(shù)的類(lèi)型。

　　 函數(shù)
　　當(dāng)?shù)谝粋€(gè)參數(shù)是函數(shù)時(shí)，該函數(shù)會(huì)被當(dāng)作待排序?qū)ο蟮膅etter方法。

　　 字符串
　　對(duì)這個(gè)字符串進(jìn)行解析的結(jié)果將決定數(shù)組元素的排序方向。我們可以傳入+或-來(lái)強(qiáng)制進(jìn)行升序或降序排列。

　　 數(shù)組
　　在排序表達(dá)式中使用數(shù)組元素作為謂詞。對(duì)于與表達(dá)式結(jié)果并不嚴(yán)格相等的每個(gè)元素，則使用第一個(gè)謂詞。

 第二個(gè)參數(shù)用來(lái)控制排序的方向（是否逆向）。

  例:

　{{ [{

　　　　‘name‘: ‘Ari‘,
　　　　‘status‘: ‘a(chǎn)wake‘
　　　},{
　　　　‘name‘: ‘Q‘,
　　　　‘status‘: ‘sleeping‘
　　},{
　　　　‘name‘: ‘Nate‘,
　　　　‘status‘: ‘a(chǎn)wake‘
　　}] | orderBy:‘name‘ }}
　　<!--
　　　　[
　　　　{"name":"Ari","status":"awake"},
　　　　{"name":"Nate","status":"awake"},
　　　　{"name":"Q","status":"sleeping"}
　　　　]　　
　　-->

 對(duì)排序結(jié)果進(jìn)行反轉(zhuǎn)(通過(guò)將第二個(gè)參數(shù)設(shè)置為true可以將排序結(jié)果進(jìn)行反轉(zhuǎn)：orderBy:‘name‘:true)

9.uppercase

 uppercase過(guò)濾器可以將字符串轉(zhuǎn)換為大寫(xiě)形式：

 二：自定義過(guò)濾器

 創(chuàng)建自定義過(guò)濾器需要將它放到自己的模塊中。

下面舉例說(shuō)明：

 將name以首字母大寫(xiě)形式顯示

<!DOCTYPE html>
<html>
<head>
 <title>Custom Filter</title>
 <meta charset="utf-8" />
 <script type="text/javascript" src="angular.min.js"></script>
</head>
<body ng-app="customFilter" ng-controller="filterController">
 <h1>{{name|lowercase|Capitalize}}</h1>
 <script type="text/javascript" src="customfilter.js"></script>
</body>
</html>

customfilter.js

(function () {
 var app = angular.module(‘customFilter‘, []);
 app.controller(‘filterController‘, function ($scope) {
  $scope.name = ‘JACK‘;
 });
 app.filter(‘Capitalize‘, function () {
  return function (input) {
   if (input) {
    return input[0].toUpperCase() + input.slice(1);
   }
  };
 });
})();

以上就是對(duì)AngularJS 過(guò)濾器 的資料整理，后續(xù)繼續(xù)補(bǔ)充相關(guān)資料，謝謝大家對(duì)本站的支持！

相關(guān)文章

最新評(píng)論