AngularJS 过滤器

1.  AngularJS 过滤器可以使用一个管道字符(|)添加到表达式和指令中。

2.  AngularJS 过滤器:

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

3.  表达式中添加过滤器:添加的过滤器是uppercase,使字符串格式化为大写。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="myCtrl"><!--AngularJS应用程序由ng-app定义,在这个div内运行-->
            姓名:{{xingMing() | uppercase}}
        </div>
    
        <script type="text/javascript" src="js/xingMing.js"></script>
    </body>
</html>
var app = angular.module("myApp", []);
app.controller('myCtrl', function($scope) { /*myCtrl是一个JavaScript函数*/
    $scope.xing = 'wang';
    $scope.ming = 'ganlin';
    $scope.xingMing = function() {
        return $scope.xing + $scope.ming;
    };
});

4.  向指令添加过滤器和过滤输入:orderBy过滤器根据表达式排序数组,filter过滤器从数组中选择一个子集

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="myCtrl"><!--AngularJS应用程序由ng-app定义,在这个div内运行-->
            <input type="text" ng-model="test" />
            <ul>
                <li ng-repeat="x in students | filter:test | orderBy:'class'">
                    {{x.name + ", " +x.class}}
                </li>
            </ul>
        </div>
    
        <script type="text/javascript" src="js/xingMing.js"></script>
    </body>
</html>
var app = angular.module("myApp", []);
app.controller('myCtrl', function($scope) { /*myCtrl是一个JavaScript函数*/
    $scope.students = [
        {name:'hong',class:'class2'},
        {name:'fang',class:'class3'},
        {name:'ming',class:'class1'}
    ];
});

原文地址:https://www.cnblogs.com/wgl1995/p/6264106.html