AngularJS 过滤器

过滤器可以使用一个管道字符（|）添加到表达式和指令中
在一个表达式里面可以使用多个过滤器：ng-repeat="x in names | filter:test | orderBy:'country'"
也可以在js里使用$filter来调用过滤器

app.controller('DemoController',['$scope','$filter',
  function($scope,$filter){
    $scope.name=$filter('lowercase')('Ari');
}]);

过滤器类型如下：

 

 

还包括json/limitTo/number
可以自定义过滤器

示例

动态计算

<div ng-app="myApp" ng-controller="costCtrl">
    计算乘法：
    <br />
    数量: <input type="number" ng-model="quantity">
    价格: <input type="number" ng-model="price">
    <p>总价 = {{ (quantity * price) | currency }}</p>

    计算加法：
    <br/>
    <!--type是number,数字-->
    第一个数字：<input type="number" ng-model="firstNumber">
    第二个数字： <input type="number" ng-model="sencondNumber">
    <p>总和 = {{ (firstNumber + sencondNumber) | currency }}</p>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('costCtrl', function($scope) {
        $scope.quantity = 1;
        $scope.price = 9.99;
        $scope.firstNumber = 123;
        $scope.sencondNumber = 321;
    });
</script>

数据排序、数据过滤

<div ng-app="myApp" ng-controller="namesCtrl">

    <p>输入过滤:</p>
    <p>
        <!--test变量绑定-->
        <input type="text" ng-model="test">
    </p>

    列表1：<br />
    <ul>
        <!--orderBy:'country'-->
        <li ng-repeat="x in names | filter:test | orderBy:'country'">
            {{ (x.name | uppercase) + ', ' + x.country }}
        </li>
    </ul>
    列表2：<br/>
    <ul>
        <!--orderBy:'country'-->
        <!--过滤“test”变量-->
        <li ng-repeat="x in names | filter:test | orderBy:'name'">
            {{ (x.name | uppercase) + ', ' + x.country }}
        </li>
    </ul>

</div>

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