欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

AngularJs中的过滤器使用方法

程序员文章站 2022-06-26 11:43:11
第一种：通过表达式进行过滤 过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。 1、uppercase 过滤器将字符串格式化为大写： 2、lowercase过滤器将...

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

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

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>

上一篇： Antd中Table控件呈现网络获取的json数据（教程）

下一篇： 前端工程化及组件化开发学习

推荐阅读