angularJs常用过滤器

来源：互联网发布：客户名单搜索软件编辑：程序博客网时间：2024/05/17 23:52

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="libs/angular.min.js"></script> <script> var app=angular.module("gaoynApp",[]); app.controller("democ",["$scope",function($scope){ $scope.nowd=new Date();//获取当前日期 console.log("当前日期",$scope.nowd); }]); </script> </head> <body ng-app="gaoynApp" ng-controller="democ"> 常用过滤器:指定数据格式 <ul> <li> 请输入你的资产 <input ng-model="mymoney" /> <p> 使用过滤器指定钱格式数据|currency:"$" {{mymoney|currency:'￥'}} </p> </li> <li> 请输入你的英文名 <input ng-model="fisrtname" /> <p> 使用过滤器指定转为大写{{fisrtname|uppercase}} </p> </li> <li> 当前日期为: <p> {{nowd|date: "yyyy年MM月dd日 hh:mm:ss"}} </p> </li> <li> limitto: <p ng-init="datas=['aa','bb','cc','apple','oranange']"> {{datas|limitTo:-2}} </p> </li> <li> filter: <p ng-init="datas=['aa','bb','cc','apple','oranange']"> {{datas|filter:'a'}} </p> </li> <li> order by: <p ng-init="datas=['aa','bb','cc','apple','oranange','dept']"> true降序 {{datas|orderBy: '':true}} false升序{{datas|orderBy: '':false}} </p> 给对象排序 <p ng-init="stus=[{name:'gaoyn',age:19},{name:'周一',age:29},{name:'王大拿',age:20}]"> true降序 {{stus|orderBy: 'age':true}} <br/> false升序{{stus|orderBy: 'age':false}} </p> 指定函数根据age排 name排序 <p ng-init="stus=[{name:'gaoyn',age:19},{name:'zh',age:29},{name:'王大拿',age:20},{name:'zy',age:19}]"> true降序 {{stus|orderBy: ['age','name']:false }} <br/> </p> </li> </ul> </body> </html>

阅读全文

0 0