AngularJS 过滤器

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

AngularJS 过滤器

AngularJS 过滤器可用于转换处理数据：

过滤器	描述
currency	格式化数字为货币格式。
filter	从数组项中选择一个子集。
lowercase	格式化字符串为小写。
uppercase	格式化字符串为大写
orderBy	根据某个表达式排列数组。

向表达式中添加过滤器

过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。

uppercase 过滤器将字符串格式化为大写：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="personCtrl">
        <p>
            姓名为 {{ fullName()| uppercase }}</p>//注意fullName后面的()
    </div>
    <script src="personController.js"></script>
</body>
</html>

personController.js：

var app = angular.module('myApp', []);
app.controller('personCtrl', function ($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function () {
        return $scope.firstName + " " + $scope.lastName;
    }
});

lowercase 过滤器将字符串格式化为小写。

currency 过滤器将数字格式化为货币格式：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="costCtrl">
        数量:
        <input type="number" ng-model="quantity">
        价格:
        <input type="number" ng-model="price">
        <p>
            总价 = {{ (quantity * price) | currency }}</p> //currency : '￥'
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('costCtrl', function ($scope) {
            $scope.quantity = 1;//注意这边是int类型，不要写成”1“
            $scope.price = 9.99;
        });
    </script>
</body>
</html>

向指令添加过滤器

过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。

orderBy 过滤器根据表达式排列数组：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="namesCtrl">
        <p>
            循环对象:</p>
        <ul>
            <li ng-repeat="x in names | orderBy:'country'">{{ x.name + ', ' + x.country }} </li>//By大写，格式为orderBy：‘’
        </ul>
    </div>
    <script src="namesController.js"></script>
</body>
</html>

namesController.js

angular.module('myApp', []).controller('namesCtrl', function ($scope) {
    $scope.names = [
        { name: 'Jani', country: 'Norway' },
        { name: 'Hege', country: 'Sweden' },
        { name: 'Kai', country: 'Denmark' }
    ];
});

过滤输入

输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。

filter 过滤器从数组中选择一个子集：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="namesCtrl">
        <p>
            输入过滤:</p>
        <p>
            <input type="text" ng-model="test"></p>
        <ul>
            <li ng-repeat="x in names | filter:test | orderBy:'country'">{{ (x.name | uppercase)//格式为filter： ng-model和filter内容一致
                + ', ' + x.country }} </li>
        </ul>
    </div>
    <script src="namesController.js"></script>
</body>
</html>