angularJS过滤器和自定义的过滤器
发布时间：2020-12-17 10:15:55 所属栏目：安全 来源：网络整理
导读：!DOCTYPE html html lang = "en" header meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" / script type = "text/javascript" src = "angular.min.js" / script title Title / title / header body div ng-app = "demo" div ng-cont
<!DOCTYPE html> <html lang="en"> <header> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="angular.min.js"></script> <title>Title</title> </header> <body> <div ng-app="demo"> <div ng-controller="firstController"> <li >大写的过滤：{{firstName|uppercase}}</li> <li >小写的过滤：{{firstName|lowercase}}</li> <br>时间格式的过滤:<br> <li>年月日：{{ today | date:'yyyy-MM-dd' }}</li> <li> 时分秒：{{ today | date:'HH:mm:ss.sss' }}</li> <br>数字格式的过滤:<br> <li>小数点：{{ numberinput |number:2 }}</li> <li>格式：{{ numberinput |number }}</li> <br>货币格式的过滤:<br> <li>默认：{{ numberinput |currency }}</li> <li>自定义：{{ numberinput |currency:"RMB ￥" }}</li> <br>filter寻找的过滤:<br> <li>寻找结果：{{ names|filter:{name:'李四'} }}</li> <br>对象的截取，获取两个数据:<br> <li>寻找结果：{{ names| limitTo:2}}</li> <br>对象的排序:<br><!--最后的参数是true表示降序，false表示的是升序--> <li>年龄倒叙：{{ names|orderBy:'age':false}}</li> <br>自定义的filters:<br> <!--自定义的filter要 app.filter,不是$scope.filter;另外一个不能包含于controller中--> {{stringContent | replacefilter:'习近平':'大Boss'}} </div> </div> <script type="text/javascript"> var app=angular.module("demo",[]); app.controller('firstController',function($scope){ $scope.firstName="lYongHong"; $scope.today = new Date(); $scope.numberinput=193; $scope.stringContent="国际在线报道(记者 杨磊)：2016年两会上，中共中央总书记、国家主席、中央军委主席习近平多次强调，要把脱贫攻坚作为“十三五”时期的头等大事来抓。3月8日,习近平在湖南代表团表示：“坚决守住民生底线，坚决打赢脱贫攻坚战。” 3月10日，习近平在青海代表团强调：“齐心协力打赢脱贫攻坚战，确保到2020年现行标准下农村牧区贫困人口全部脱贫。”"; $scope.names=[ {name:'张三',age:100,country:'usa'},{name:'李四',age:101,country:'germany'},{name:'王五',age:89,country:'china'} ] }); app.filter('replacefilter',function(){ return function(input,sourceName,toName){ return input.replace(sourceName,toName); }; }); </script> </body> </html>
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |