AngularJs中的过滤器使用方法总结

最新推荐文章于 2019-09-03 20:27:07 发布

K'illCode

最新推荐文章于 2019-09-03 20:27:07 发布

阅读量770

点赞数

分类专栏： angularJS 文章标签： angularJs

本文链接：https://blog.csdn.net/Dome_/article/details/79277334

版权

angularJS 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

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

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

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

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

`1`	`{{name\|lowercase\|uppercase}}`

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

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

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

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

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

age是排序条件。

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

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

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

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

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

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

JavaScript部分：

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

html部分：

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

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

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

 
       01<!DOCTYPE html>
 
       02<html lang="en">
 
       03<head>
 
       04    <meta charset="UTF-8">
 
       05    <title>Title</title>
 
       06    <style type="text/css">
 
       07        .ng-cloak{display:none;}
 
       08        td{height:30px;line-height:30px;padding:0px 10px;text-align:center;}
 
       09    </style>
 
       10</head>
 
       11<body ng-app="app" ng-controller="ctrl" ng-cloak class="ng-cloak">
 
       12    <table cellpadding="0" cellspacing="0" border="1">
 
       13        <thead>
 
       14        <tr>
 
       15            <td>姓名</td>
 
       16            <td ng-click="orderBy('age')">年龄</td>
 
       17            <td>性别</td>
 
       18            <td ng-click="orderBy('click')">点击</td>
 
       19        </tr>
 
       20        </thead>
 
       21        <tbody>
 
       22            <tr ng-repeat="v in data">
 
       23                <td>{{v.user}}</td>
 
       24                <td>{{v.age}}</td>
 
       25                <td>{{v.sex}}</td>
 
       26                <td>{{v.click}}</td>
 
       27            </tr>
 
       28        </tbody>
 
       29    </table>
 
       30</body>
 
       31</html>
 
       32<script type="text/javascript" src="../js/angular.min.js"></script>
 
       33<script type="text/javascript">
 
       34    var m = angular.module('app', []);
 
       35    m.controller('ctrl', ['$scope','$filter', function($scope, $filter){
 
       36        $scope.data = [
 
       37            {user:'张三', age:23, sex:'男', click:100},
 
       38            {user:'李四', age:26, sex:'女', click:200},
 
       39            {user:'王五', age:24, sex:'男', click:300},
 
       40        ];
 
       41        $scope.orderBy = function(field){
 
       42            if(arguments.callee.mark=='undefined'){
 
       43                arguments.callee.mark = false;
 
       44            }
 
       45            arguments.callee.mark = !arguments.callee.mark;
 
       46            $scope.data = $filter('orderBy')($scope.data, field, arguments.callee.mark);
 
       47        }
 
       48    }]);
 
       49</script>