15、AngularJs中的过滤器使用方法总结【持续更新】

阅读() @2018-10-29 18:16:09

今天学习下AngularJs中的过滤器使用方法:

第一种:通过表达式进行过滤

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

1、uppercase 过滤器将字符串格式化为大写:

2、lowercase过滤器将字符串格式化为小写:

{{name|lowercase|uppercase}}

3、currency 过滤器将数字格式化为货币格式:

{{price|currency:'$':1}}

参数$和1是可选的,第一个参数是自定义字符,第二个参数表示保留的小数位数。

4、orderBy 过滤器根据表达式排列数组:

{{user | orderBy : 'age' : true}}
<!--true表示倒序,false表示升序,默认是升序-->

age是排序条件。

5、limitTo过滤器可以截取字符串:

{{data|limitTo:13:2}}
<!--第一个参数是截取的字符数,第二个参数是从第几位开始截取-->

6、filter 过滤器从数组中选择一个子集:

{{user | filter : '张三' : true}}
<!--true表示完全匹配-->

第二个参数true是可选的,表示完全匹配,如果不加第二个参数,说明是模糊匹配。

第二种:通过控制器进行过滤。

JavaScript部分:

var m = angular.module('app', []);
m.controller('ctrl', ['$scope','$filter', function($scope, $filter){
    $scope.time = new Date().getTime();
    $scope.date = function(){
        $scope.time = $filter('date')($scope.time, 'yyyy:mm:dd hh:mm:ss');
    }
}]);

html部分:

{{time}}
<button ng-click="date()">标准时间</button>

通过控制器进行数据过滤,在控制器中加入了新的参数$filter,就是依赖注入。

下面来看一个实例:将用户数据根据年龄或点击数进行升序或降序排序:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .ng-cloak{display:none;}
        td{height:30px;line-height:30px;padding:0px 10px;text-align:center;}
    </style>
</head>
<body ng-app="app" ng-controller="ctrl" ng-cloak class="ng-cloak">
    <table cellpadding="0" cellspacing="0" border="1">
        <thead>
        <tr>
            <td>姓名</td>
            <td ng-click="orderBy('age')">年龄</td>
            <td>性别</td>
            <td ng-click="orderBy('click')">点击</td>
        </tr>
        </thead>
        <tbody>
            <tr ng-repeat="v in data">
                <td>{{v.user}}</td>
                <td>{{v.age}}</td>
                <td>{{v.sex}}</td>
                <td>{{v.click}}</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript">
    var m = angular.module('app', []);
    m.controller('ctrl', ['$scope','$filter', function($scope, $filter){
        $scope.data = [
            {user:'张三', age:23, sex:'男', click:100},
            {user:'李四', age:26, sex:'女', click:200},
            {user:'王五', age:24, sex:'男', click:300},
        ];
        $scope.orderBy = function(field){
            if(arguments.callee.mark=='undefined'){
                arguments.callee.mark = false;
            }
            arguments.callee.mark = !arguments.callee.mark;
            $scope.data = $filter('orderBy')($scope.data, field, arguments.callee.mark);
        }
    }]);
</script>

对于上述代码中的arguments有疑问的童鞋,可参考:《详解Javascript中arguments对象的的意义与用法》。

(持续更新中)!

微信二维码