一、货币过滤器--按照指定的货币格式进行输出
原始数据输出:<span ng-bind="price"></span>
输出结果:499.1213
货币过滤器输出:<span ng-bind="price | currency"></span>
输出结果:$499.12 (默认以$符号输出,保留小数后两位)
以¥符号输出设置保留小数后三位<span ng-bind="price | currency:'¥':3"></span>
输出结果:¥499.121
var app = angular.module("myApp", []);
app.controller("myCtrl", ["$scope", function($scope) {
$scope.price = 499.1213;
}]);
二、事件日期过滤器
日期原始输出:<span ng-bind="date"></span>
输出结果:"2017-04-27T14:33:56.674Z"
年月日周输出:<span ng-bind="date | date:'yyyy年MM月dd日hh:mm:ss EEE'"></span>输出结果:2017年04月27日10:33:56 Thu
var app=angular.module("myApp",[]);
app.controller("myCtrl",["$scope",function ($scope) {
$scope.date = new Date();
}])
三、长度限制过滤器--limitTo
长度:<input type="text" ng-model="length"> 位置:<input type="text" ng-model="index">
<tr ng-repeat="us in users |limitTo:length:index">
<th><span ng-bind="us.userID"></span></th>
<th><span ng-bind="us.username"></span></th>
<th><span ng-bind="us.nickname"></span></th>
</tr>
var app=angular.module("myApp",[]);
app.controller("myCtrl",["$scope",function ($scope) {
$scope.users = [
{userID:1, username:"cat", nickname:"tom"},
{userID:2, username:"xiaofan", nickname:"张小凡"},
{userID:3, username:"biyao", nickname:"碧瑶"},
{userID:4, username:"luxueqi", nickname:"陆雪琪"},
{userID:5, username:"linjingyu", nickname:"林惊羽"},
{userID:6, username:"cengshushu", nickname:"曾书书"},
{userID:7, username:"zhuque", nickname:"朱雀"},
{userID:8, username:"qinglong", nickname:"青龙"},
{userID:9, username:"guiwang", nickname:"鬼王"},
{userID:10, username:"dushen", nickname:"赌神"},
{userID:11, username:"jinpiner", nickname:"金瓶儿"}
]
}])
四、字符串大小写转换过滤器
原始输出:<span ng-bind="name"></span>
输出结果:Tom
全部大写输出:<span ng-bind="name | uppercase">
输出结果:TOM
全部小写输出:<span ng-bind="name | lowercase"></span>
输出结果:tom
var app=angular.module("myApp",[]);
app.controller("myCtrl",["$scope",function ($scope) {
$scope.name="Tom";
}])
五、排序输出--orderBy
排序关键词:<input type="text" ng-model="keyword"> 关键字 排序顺序:<input type="checkbox" ng-model="sort">倒序 (选中为倒序)
<tr ng-repeat="us in users | orderBy:keyword:sort">
<th><span ng-bind="us.userID"></span></th>
<th><span ng-bind="us.username"></span></th>
<th><span ng-bind="us.nickname"></span></th>
</tr>
JS代码:
var app=angular.module("myApp",[]);
app.controller("myCtrl",["$scope",function ($scope) {
$scope.users = [
{userID:1, username:"cat", nickname:"tom"},
{userID:2, username:"xiaofan", nickname:"张小凡"},
{userID:3, username:"biyao", nickname:"碧瑶"},
{userID:4, username:"luxueqi", nickname:"陆雪琪"},
{userID:5, username:"linjingyu", nickname:"林惊羽"},
{userID:6, username:"cengshushu", nickname:"曾书书"},
{userID:7, username:"zhuque", nickname:"朱雀"},
{userID:8, username:"qinglong", nickname:"青龙"},
{userID:9, username:"guiwang", nickname:"鬼王"},
{userID:10, username:"dushen", nickname:"赌神"},
{userID:11, username:"jinpiner", nickname:"金瓶儿"}
]
}])
六、过滤输出--filter
关键字:<input type="text" ng-model="keyword">
<tr ng-repeat="us in users |filter:keyword"> <th><span ng-bind="us.userID"></span></th> <th><span ng-bind="us.username"></span></th> <th><span ng-bind="us.nickname"></span></th> </tr>JS代码同上
七、自定义过滤器--转换为大写字母
<span ng-bind="name | myfilter"></span>
JS代码:
var app=angular.module("myApp",[]); app.filter("myfilter",function () { return function (value) { value=value.toUpperCase(); return value; } }) app.controller("myCtrl",["$scope",function ($scope) { $scope.name="abcdefg"; }])