本文實例講述了AngularJS常見過濾器用法。分享給大家供大家參考,具體如下:
過濾器用來格式化需要展示給用戶的數據。在HTML中的模板綁定符號 {{ }} 內通過 | 符號來調用過濾器。以下是常用的過濾器。
大小寫過濾器
{{ 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> 名字轉大寫: {{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 過濾器可以將一個數值格式化為貨幣格式。用 {{ 123 | currency }} 來將123轉化成貨幣格式。currecy 過濾器允許我們自己設置貨幣符號。默認情況下會采用客戶端所處區域的貨幣符號,但是也可以自定義貨幣符號。如下:
<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過濾器用來截取數組或字符串,接收一個參數用來指定截取的長度。實例:
<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過濾器可以將一個數組中的元素進行排序,接收一個參數來指定排序規則,參數可以是一個字符串,表示以該屬性名稱進行排序。可以是一個函數,定義排序屬性。還可以是一個數組,表示依次按數組中的屬性值進行排序(若按第一項比較的值相等,再按第二項比較),還是拿上面的孩子數組舉例:
新聞熱點
疑難解答
圖片精選