在AngularJS中使用過濾器格式化展示數據，在“{{}}”中使用“|”來調用過濾器，使用“:”傳遞參數。
1、內置過濾器
-
currency:將數值格式化為貨幣格式
<body ng-app="app">
<ul ng-controller="DemoController">
<li>默認為美元符號：{{price|currency}}</li>
<li>用冒號傳值￥：{{price|currency:'￥'}}</li>
</ul>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller("DemoController",['$scope',function ($scope) {
$scope.price = 11.11;
}])
</script>
</body>
將數值格式化為貨幣
-
date：日期格式化，年（y）、月（M）、日（d）、星期（EEEE/EEE）、時（H/h）、分（m）、秒（s）、毫秒（.sss），也可以組合到一起使用。
<body ng-app="app">
<ul ng-controller="DemoController">
<li>時間：{{now|date:'yyyy-MM-dd h:mm:ss '}}</li>
</ul>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller("DemoController",['$scope',function ($scope) {
$scope.now = new Date();
}])
</script>
</body>
格式化時間
-
filter：在給定數組中選擇滿足條件的一個子集，并返回一個新數組，其條件可以是一個字符串、對象、函數
<body ng-app="app">
<ul ng-controller="DemoController">
<!--過濾出items數組中含有s的字符串-->
<li>{{items|filter:'s'}}</li>
<!--過濾出年齡為20的人-->
<li>{{student|filter:{age:20} }}</li>
</ul>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller("DemoController",['$scope',function ($scope) {
$scope.items = ['html','js','jq','css','student'];
$scope.student = [
{name:'小明',age:19},
{name:'小李',age:20},
{name:'張三',age:20}
]
}])
</script>
</body>
過濾字符串和對象
-
json:將Javascrip對象轉成JSON字符串
<body ng-app="app">
<ul ng-controller="DemoController">
<li>轉化為json對象：{{student|json}}</li>
</ul>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller("DemoController",['$scope',function ($scope) {
$scope.student = [
{name:'小明',age:19},
{name:'小李',age:20},
{name:'張三',age:20}
]
}])
</script>
</body>
轉化為json
-
limitTo:取出字符串或數組的前（正數）幾位或后（負數）幾位
<body ng-app="app">
<ul ng-controller="DemoController">
<li>截取數組items的第一個和最后一個元素：{{items|limitTo:1}}，{{items|limitTo:-1}}</li>
</ul>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller("DemoController",['$scope',function ($scope) {
$scope.items = ['html','js','jq','css','student'];
}])
</script>
</body>
Paste_Image.png
-
lowercase:將文本轉換成小寫格式,uppercase:將文本轉換成大寫格式
<body ng-app="app">
<ul ng-controller="DemoController">
<li>將str2轉化為小寫：{{str2|lowercase}}</li>
<li>將str1轉化為大寫：{{str1|uppercase}}</li>
</ul>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller("DemoController",['$scope',function ($scope) {
$scope.str1 = 'ddddddddddddhello';
$scope.str2 = 'HELLODDDDDDDDDDDDDDDDDDDDDDDDDDDD';
}])
</script>
</body>
字符串大小寫轉化
-
number：數字格式化，可控制小位位數
<body ng-app="app">
<ul ng-controller="DemoController">
<!--將str3轉化為數字，并保留四位小數-->
<li>{{str3|number:4}}</li>
</ul>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller("DemoController",['$scope',function ($scope) {
$scope.str3 = '45678.22'
}])
</script>
</body>
Paste_Image.png
-
orderBy:對數組進行排序，第2個參數可控制方向
<body ng-app="app">
<ul ng-controller="DemoController">
<li>{{items|orderBy:'':true}}</li>
<!--如果數組中村的時對象的話，可以按照某個屬性值排序，true是降序，false是升序-->
<li>{{student|orderBy:'age':true}}</li>
</ul>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller("DemoController",['$scope',function ($scope) {
$scope.items = ['html','js','jq','css','student'];
$scope.student = [
{name:'小明',age:19},
{name:'小李',age:20},
{name:'張三',age:20}
]
}])
</script>
</body>
Paste_Image.png
2、自定義過濾器
當我們內置的過濾器不能滿足我們的需求時，我們可以自定義過濾器，AngularJs也支持自定義過濾器。
app.filter('capitalize',function () {
return function () {
}
});
使用app.filter()方法 自定義過濾器，其中兩個參數，一個表示過濾器的名稱，一個表示返回的函數，接下來，寫一個小Demo來定義一個把英文字符串首字母轉化為大寫的過濾器。
<body ng-app="app">
<ul ng-controller="demoController">
<h4>將首字母轉化為大寫：{{info|capitalize}}</h4>
</ul>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
// 定義過濾器，第一個參數表示過濾器的名稱
app.filter('capitalize',function () {
return function (input) {
// 將字符串的第一個字母變為大寫
return input[0].toUpperCase()+input.slice(1)
}
});
app.controller("demoController",["$scope",function ($scope) {
$scope.info ="my name is huangsen";
}])
</script>
</body>
在這里需要傳遞一個input參數來接收，本來過濾器的哪個豎線就是相當于一個管道，這里的input就相當于傳遞過來的內容。
