首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >AngularJS系列(三)——过滤器(filder)

AngularJS系列(三)——过滤器(filder)

作者头像
逝兮诚
发布2019-10-30 18:00:08
4550
发布2019-10-30 18:00:08
举报
文章被收录于专栏:代码人生代码人生

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/luo4105/article/details/77894214

过滤器可以用一个管道字符’|’添加到表达式和指令中。

常用的过滤器有

l currency:数字转金额

l uppercase/lowercase:字符串转大小写

l date:时间格式化

l json:Json解析

l limitTo:字符串截取

l orderBy:排序

l filter:查找

<div ng-app="myApp"ng-controller="personCtrl">
         <!--orderBy只能排序字符串 -->
         <p>转金额:{{moneys| currency}}</p>
         <p>姓名为(大写):{{fullName()| uppercase}}</p>
         <p>姓名为(小写):{{fullName()| lowercase}}</p>
         <p>时间格式化:{{date| date:'yyyy-MM-dd hh:mm:ss'}}</p>
         <p>json解析:{{jsonText| json}}</p>
         <p>字符串截取:{{fullName()| limitTo:6}}</p>
         <p>根据id正序排序:</p>
         <ling-repeat="x in people | orderBy:'id'">
                   {{x.id  + "," + x.name}}
         </li>
         <p>根据id倒序排序:</p>
         <ling-repeat="x in people | orderBy:'id':true">
                   {{x.id  + "," + x.name}}
         </li>
         <p>查询id为10的people:</p>
         <ling-repeat="x in people | filter:{id:0}">
                   {{x.id  + "," + x.name}}
         </li>
</div>
<script >
         angular.module('myApp',[]).controller('personCtrl', function($scope) {
                   $scope.moneys= "4200",
             $scope.firstName = "John",
             $scope.lastName = "Doe",
             $scope.fullName = function() {
                return $scope.firstName +" " + $scope.lastName;
                   },
                   $scope.date= new Date(),
                   $scope.people= [{id:10,name:'张三'},{id:8,name:'李四'},{id:12,name:'王五'},{id:18,name:'刘九'}],
                   $scope.jsonText= {id:10,name:'张三'}
                  
         });    
</script>

自定义过滤器

以下实例自定义一个过滤器 reverse,将字符串反转:

<div ng-app="myApp"ng-controller="myCtrl">
姓名: {{ msg | reverse }}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.msg = "Runoob";
});
app.filter('reverse' ,function() {
         returnfunction(text) {
                   returntext.split("").reverse().join("");
         }
})
</script>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-09-08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档