当前位置： 移动技术网 > IT编程>网页制作>CSS > AngularJs中的过滤器使用方法

AngularJs中的过滤器使用方法

2018年04月04日  | 移动技术网IT编程  | 我要评论

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

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

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>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网