AngularJS常見過濾器用法實例總結(jié)

更新時間：2017年07月06日 11:09:36 作者：Annexu1991

這篇文章主要介紹了AngularJS常見過濾器用法,結(jié)合實例形式總結(jié)分析了AngularJS大小寫過濾器、貨幣過濾器、日期過濾器、limitTo過濾器、orderBy過濾器及自定義過濾器使用方法,需要的朋友可以參考下

本文實例講述了AngularJS常見過濾器用法。分享給大家供大家參考，具體如下：

過濾器用來格式化需要展示給用戶的數(shù)據(jù)。在HTML中的模板綁定符號 {{ }} 內(nèi)通過 | 符號來調(diào)用過濾器。以下是常用的過濾器。

大小寫過濾器

{{ name | uppercase }} 大寫過濾器
{{ name | lowercase}} 小寫過濾器

實例：（大寫過濾器）

<div ng-controller='myController'>
  姓氏: <input type="text" ng-model="student.firstName"></br></br>
  名字: <input type="text" ng-model="student.lastName"></br></br>
  名字轉(zhuǎn)大寫: {{student.fullName() | uppercase}}
</div>
<script>
var app=angular.module('app',[]);
app.controller('myController',function($scope){
  $scope.student={
    firstName: "xu",
    lastName: "xiaohong",
    fullName:function(){
      var studentObject;
      studentObject = $scope.student;
      return studentObject.firstName + studentObject.lastName;
    }
  };
});
</script>

貨幣過濾器

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

<div ng-controller='myController'>
  Enter fees: <input type="text" ng-model="student.fees"></br>
  fees: {{student.fees | currency:'￥'}}
</div>
<script>
var app=angular.module('app',[]);
app.controller('myController',function($scope){
  $scope.student={
    fees:500
  };
});
</script>

日期過濾器

date 過濾器可以將日期格式化成需要的格式。如下：

<div ng-controller='myController'>
  {{data | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}
</div>
<script>
var app=angular.module('app',[]);
app.controller('myController',function($scope){
  $scope.data=new Date();
});
</script>

limitTo過濾器

limitTo過濾器用來截取數(shù)組或字符串，接收一個參數(shù)用來指定截取的長度。實例：

<body ng-controller="test">
  {{ childrenArray | limitTo : 2 }}
  <script>
    var app=angular.module('app',[]);
    app.controller('test',function($scope){
      $scope.childrenArray = [
        {name:'kimi',age:3},
        {name:'cindy',age:4},
        {name:'anglar',age:4},
        {name:'shitou',age:6},
        {name:'tiantian',age:5}
      ];
    });
  </script>
</body>

orderBy過濾器：

orderBy過濾器可以將一個數(shù)組中的元素進行排序，接收一個參數(shù)來指定排序規(guī)則，參數(shù)可以是一個字符串，表示以該屬性名稱進行排序?？梢允且粋€函數(shù)，定義排序?qū)傩?。還可以是一個數(shù)組，表示依次按數(shù)組中的屬性值進行排序（若按第一項比較的值相等，再按第二項比較），還是拿上面的孩子數(shù)組舉例：

<div>{{ childrenArray | orderBy : 'age' }}</div>   //按age屬性值進行排序
<div>{{ childrenArray | orderBy : orderFunc }}</div>  //按照函數(shù)的返回值進行排序
<div>{{ childrenArray | orderBy : ['age','name'] }}</div> //如果age相同，按照name進行排序

自定義過濾器：

AngularJS編寫自定義過濾器的形式和AngularJS的factory service非常相像，一定記得它返回一個對象或者是一個函數(shù)即可，編寫的時候，只需要一個帶有一個以上參數(shù)的函數(shù)即可。格式大致如下：

app.filter('filter(過濾器)名稱',function(){
      return function(需要過濾的對象,過濾器參數(shù)1,過濾器參數(shù)2,...){
           //...執(zhí)行業(yè)務(wù)邏輯代碼
           return 處理后的對象;
      }
});

實例：（首字母大寫）

{{ 'ginger loves dog treats' | capitalize }}
<script>
  var app=angular.module('app',[]);
  app.filter('capitalize',function(){
    return function(input){
      if(input){
        return input.charAt(0).toUpperCase() + input.slice(1);
      }
    }
  })
</script>

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對大家AngularJS程序設(shè)計有所幫助。

您可能感興趣的文章: