AngularJS 过滤器（详解）

一、简介　　AngularJS过滤器能够用来格式化数据，过滤器能够用在表达式和指令中，也能够注入到其他地方进行使用。AngularJS提供了9种常用的内置过滤器，我们还可以创建自定义过滤器来格式数据，以完成更多个性化的要求。二、使用方式　　下面是过滤器的三种使用方式，形式如下。1、在表达式中使用{{ text | uppercase }} //将字符串text大写输出

拼搏的小叔

1621人浏览 · 2017-05-19 18:04:23

拼搏的小叔 · 2017-05-19 18:04:23 发布

一、简介

　　AngularJS过滤器能够用来格式化数据，过滤器能够用在表达式和指令中，也能够注入到其他地方进行使用。AngularJS提供了9种常用的内置过滤器，我们还可以创建自定义过滤器来格式数据，以完成更多个性化的要求。

二、使用方式

　　下面是过滤器的三种使用方式，形式如下。

1、在表达式中使用

{{ text | uppercase }} //将字符串text大写输出
{{ money | currency:"￥" }}  //将数字money以人民币形式输出

2、在属性中使用

<div ng-repeat="number in numbers|limitTo:2">
    {{ number }}
</div>

3、注入
　　注入$filter服务，使用$filter(“过滤器名”)就可以获取到相应的过滤器函数了，可以将对应的函数打印出来查看用法。

 app.controller("myController", function ($scope,$filter) {
    $scope.numbers = ["1","2","3","4"];
    console.log($filter('limitTo')($scope.numbers,2,1)); //["2","3"]
});

三.内置过滤器

　　下面是AngularJS中九种内置服务的简单介绍。

AngularJS的内置服务都比较简单，我们演示一下上面比较易理解的uppercase，lowercase，currency，number。

<body ng-app="myApp" ng-controller="myController">
    <p>{{ string | uppercase }}</p> //TEST
    <p>{{ string | lowercase }}</p>//test
    <p>{{ number | currency }}</p>//$123,456.79
    <p>{{ number | currency:"￥" }}</p>//￥123,456.79
    <p>{{ number | number }}</p>//123,456.789
    <p>{{ number | number:2 }}</p>//123,456.79
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myController", function ($scope) {
            $scope.string = "Test";
            $scope.number = "123456.789";
        });
    </script>
</body>

接下来我们重点讲解json，date，filter，limitTo，orderBy这五个过滤器。

1、json
　　下面这个例子演示了将JavaScript和JSON对象转为字符串，可以很轻松的打印出来查看，可以看到如果对象里面还有对象和数组，不方便直接查看。

<body ng-app="myApp" ng-controller="myController">
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myController", function ($scope,$filter,$http) {
            $scope.JSObject = {
                name:["张三","李四","王五"],
                age:[15,16,17]
            };
            console.log($scope.JSObject);
            console.log($filter('json')($scope.JSObject));
            var promise = $http.get("http://localhost:3000/resource");
            promise.then(function (response) {
                $scope.JsonObject = response.data;
                console.log($scope.JsonObject);
                console.log($filter('json')($scope.JsonObject));
            });
        });
    </script>
</body>

2、date
该过滤器提供了几种常用的日期格式，我们传进对应的参数即可使用。

<body ng-app="myApp" ng-controller="myController">
    <p>{{ date }}</p>
    <p>{{ date | date:'medium'}}</p>
    <p>{{ date | date:'short'}}</p>
    <p>{{ date | date:'fullDate'}}</p>
    <p>{{ date | date:'longDate'}}</p>
    <p>{{ date | date:'mediumDate'}}</p>
    <p>{{ date | date:'shortDate'}}</p>
    <p>{{ date | date:'shortTime'}}</p>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myController", function ($scope) {
            $scope.date = new Date();
        });
    </script>
</body>

下面是一个自定义格式日期的演示例子。

<body ng-app="myApp" ng-controller="myController">
    <p>{{ date | date:'MMMd,y' }}</p>
    <p>{{ date | date:'EEEE,d,M'}}</p>
    <p>{{ date | date:'hh:mm:ss.sss'}}</p>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myController", function ($scope) {
            $scope.date = new Date();
        });
    </script>
</body>

结果：Fri19,2017 Friday,5/19 18:17:30.100

3、filter
如前所述，filter第一个参数可以是下列三种类型，第二个参数为true的时候顺序反转。

<body ng-app="myApp" ng-controller="myController">
    过滤出属性值含"el"的水果
    <div ng-repeat="fruit in fruits | filter:'el'">
        {{ fruit.name }}
    </div>
    过滤出属性值不含"el"的水果
    <div ng-repeat="fruit in fruits | filter:'!el'">
        {{ fruit.name }}
    </div>
    过滤出名字含"el"的水果
    <div ng-repeat="fruit in fruits | filter:object">
        {{ fruit.name }}
    </div>
    过滤出重量超过0.2的水果
    <div ng-repeat="fruit in fruits | filter:myFunction">
        {{ fruit.name }}
    </div>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myController", function ($scope) {
            $scope.fruits = [
                {name:'apple',color:'red',weight:0.2},
                {name:'banana',color:'yellow',weight:0.15},
                {name:'grape',color:'purple',weight:0.01},
                {name:'orange',color:'orange',weight:0.3},
                {name:'watermelon',color:'red',weight:1.3}
            ];
            $scope.object = {name:"el"};
            $scope.myFunction = function(input) {
                return input.weight > 0.2;
            };
        });
    </script>
</body>

4、limitTo
　　limitTo可以让我们截取数组或字符串，不幸的是，只能从头截取或从尾截取，参数中的数字正负表示从头或者从尾，数字大小表示想要的个数，若大于传入的字符串或数组的长度，则等同于不进行任何处理。下面是演示limitTo的一个简单例子。

<body ng-app="myApp" ng-controller="myController">
   <div ng-repeat="fruit in fruits | limitTo:-4">
       {{ fruit | limitTo:5 }}
   </div>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myController", function ($scope) {
            $scope.fruits = ['apple','banana','grape','orange','watermelon'];
        });
    </script>
</body>

结果：banan grape orang water

5、orderBy
如前所述，orderBy参数可以是下面三种类型。

<body ng-app="myApp" ng-controller="myController">
    按重量从小到大排序
    <div ng-repeat="fruit in fruits | orderBy:'weight'">
        {{ fruit.name }}
    </div>
    按重量从大到小排序
    <div ng-repeat="fruit in fruits | orderBy:'weight':true">
        {{ fruit.name }}
    </div>
    按颜色字典序从小到大排序，颜色相同时，按重量从小到大排序
    <div ng-repeat="fruit in fruits | orderBy:'array'">
        {{ fruit.name }}
    </div>
    按名字字典序从小到大排序
    <div ng-repeat="fruit in fruits | orderBy:'myFunction'">
        {{ fruit.name }}
    </div>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myController", function ($scope) {
           $scope.fruits = [
               {name:'apple',color:'red',weight:0.2},
               {name:'orange',color:'orange',weight:0.3},
               {name:'banana',color:'yellow',weight:0.15},
               {name:'grape',color:'purple',weight:0.01},
               {name:'watermelon',color:'red',weight:1.3}
           ];
           $scope.array = ["color","weight"];
           $scope.myFunction = function() {
               return "name";
           };
        });
   </script>
</body>

四、自定义过滤器

　　显然，AngularJS内置的九种服务并不能满足我们的所有要求，因此AngularJS允许我们自己定义我们需要的过滤器。
　　模块中的filter方法能够定义一个过滤器，该方法接受两个参数。第一个参数表示过滤器名，第二个参数是一个函数，该函数返回一个过滤器，过滤器本质上是一个会把我们输入的内容当做传入参数的函数，返回值就是对输入参数进行处理后的数据。
　　如果想定义过滤器的参数，只需要在过滤器函数加上我们需要的参数。下面是一个自定义过滤器，该过滤器允许用户指定对字符串的前几个字母大写。

<body ng-app="myApp" ng-controller="myController">
    <div>{{ string | myUppercase }}</div>
    <div>{{ string | myUppercase:3 }}</div>
    <div>{{ string | myUppercase:6 }}</div>
    <div>{{ string | myUppercase:15 }}</div>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myController", function ($scope) {
           $scope.string = "textString";
        });
        app.filter("myUppercase", function () {
           return function(inputString,number) {
               if(number == undefined || number <= 0 || number >= inputString.length)
                   return inputString.toUpperCase();
               return inputString.slice(0,number).toUpperCase()+inputString.slice(number);
           };
        });
   </script>
</body>

五、注意事项

多个过滤器同时使用

　　AngularJS会从左到右依次执行每一个过滤器，要注意后面的过滤器是否会对前面的过滤器造成影响。
　　下面这个例子中，uppercase过滤器完全被lowercase过滤器的影响所覆盖了。

<body ng-app="myApp" ng-controller="myController">
    <div>{{ string | uppercase | lowercase}}</div>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myController", function ($scope) {
           $scope.string = "textString";
        });
   </script>
</body>

结果：textstring