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