AngularJS--多个过滤器使用方法

一、货币过滤器--按照指定的货币格式进行输出

原始数据输出：<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";

}])