angular 过滤器

来源：互联网发布：tv霸网络电视直播编辑：程序博客网时间：2024/05/22 02:10

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>AngularJS</title>
 <script type="text/javascript" src="angular.js" ></script>
 <script>
 //获取系统时间对象
 var date = new Date();

 var app = angular.module('myapp', []);
 app.controller('myctrl', function($scope) {
 //货币过滤器
 $scope.money = 1000;
 //大写过滤器
 $scope.hello = "hello";
 //小写过滤器
 $scope.HELLOW = "HELLOW";
 //日期过滤器
 $scope.date = date;
 //反转字符串
 $scope.fzzfc = "abcde";
 //长度过滤器
 $scope.user = ["zs","ls","ls","ww"];
 //子元素过滤器
 $scope.users = [{
 name:"zs",
 age:20
 },{
 name:"ls",
 age:21
 },{
 name:"ww",
 age:22
 }];

 //默认排序
 $scope.student = [{
 id:1,
 name:"张三",
 age:20
 },{
 id:3,
 name:"王五",
 age:23
 },{
 id:2,
 name:"李四",
 age:22
 }];

 $scope.order = function(text){
 console.log(text);
 return text["id","-name"];
 }
 });
 //反转字符串
 app.filter('reverse', function() { //可以注入依赖
 return function(text) {
 return text.split("").reverse().join("");
 }
 });
 </script>
</head>
<body style="padding: 20px" ng-app="myapp" ng-controller="myctrl">
 货币过滤器 : {{ money | currency}}
 大写过滤器：{{hello | uppercase}}
 小写过滤器：{{HELLOW | lowercase}}
 日期过滤器：{{date | date:"yyyy.MM.dd HH:mm:ss"}}
 反转字符串：{{fzzfc | reverse}}
 
 长度过滤器：{{user | limitTo:1}}
 
 子元素过滤器：{{users | filter:{'name':'ls','age':21} }}
 <hr />
 默认排序：{{student | orderBy}}
 角标升序：{{student | orderBy:"+"}}
 角标降序：{{student | orderBy:"-"}}
 角标升序：{{student | orderBy:true}}
 ID升序：{{student | orderBy:"id"}}
 ID降序：{{student | orderBy:"-id"}}
 ID升序name升序：{{student | orderBy:["id","name"]}}
 ID升序name将序：{{student | orderBy:["id","-name"]}}
 ID升序name将序：{{student | orderBy:order}}
</body>
</html>

阅读全文

0 0