第一种: 通过表达式进行过滤
过滤器可以通过一个管道字符 (|) 和一个过滤器添加到表达式中
1uppercase 过滤器将字符串格式化为大写:
2lowercase 过滤器将字符串格式化为小写:
{{name|lowercase|uppercase}}
3currency 过滤器将数字格式化为货币格式:
{{price|currency:'$':1}}
参数 $ 和 1 是可选的, 第一个参数是自定义字符, 第二个参数表示保留的小数位数
4orderBy 过滤器根据表达式排列数组:
- {{user | orderBy : 'age' : true}}
- <!--true 表示倒序, false 表示升序, 默认是升序 -->
age 是排序条件
5limitTo 过滤器可以截取字符串:
- {{data|limitTo:13:2}}
- <!-- 第一个参数是截取的字符数, 第二个参数是从第几位开始截取 -->
6filter 过滤器从数组中选择一个子集:
- {{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>
来源: https://www.2cto.com/kf/201802/721126.html