<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<div ng-bind="myName | uppercase"></div> <!--uppercase转换成大写-->
<div ng-bind="myName | lowercase"></div> <!--lowercase转换成小写-->
<div class="" ng-bind="money | currency : '¥'"> </div><!--currency 过滤器将数字格式化为货币格式-->
<div class="" ng-repeat="v in city | orderBy:'name'">
<p ng-bind="v.name"></p>
</div><!--orderBy 过滤器根据表达式排列数组-->
<div class="" ng-repeat="v in city | orderBy:'-id' | filter : ''">
<p ng-bind="v.name" style="color:red;"></p>
</div><!--orderBy 过滤器根据表达式排列数组 默认正序asc,倒序添加-负号-->
<!--filter 过滤器根据表达式过滤不包含过滤器中的内容-->
<!--自定义注入依赖-->
<div class="" ng-bind="myName | aa" style="color:blue;"> <!--自定义过滤器aa-->
</div>
</div>
<script>
angular.module('myApp',[]).controller('myCtrl',function($scope){
$scope.myName="shiqichao";
$scope.money=100;
$scope.city=[
{"id":"1","name":"福建"},
{"id":"2","name":"广东"},
{"id":"5","name":"上海"},
{"id":"4","name":"北京"},
{"id":"3","name":"四川"}
]
}).filter('aa',function(){ //自定义过滤器,aa为自定义过滤名称 ,val为穿参,split("")将val切割成数组,reverse()将数组反转,join("")将数组变成字符串
return function(val){
return val.split("").reverse().join("");
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>1、uppercase,lowercase 大小写转换</p>
{{ "lower cap string" | uppercase }}<br>
{{ "TANK is GOOD" | lowercase }}
<p>2、date 格式化</p>
{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}}
<p>3、number 格式化(保留小数)</p>
{{149016.1945000 | number:2}}
<p>4、currency货币格式化</p>
{{ 250 | currency }} <br>
{{ 250 | currency:"RMB ¥ " }}
<p>5、filter查找</p>
<p>查找name为iphone的行</p>
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{'name':'iphone'} }}
<p>6、limitTo 截取</p>
{{"1234567890" | limitTo :6}}<br>
{{"1234567890" | limitTo:-4}}
<p>7、orderBy 排序</p>
<p>根id降序排</p>
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id':true }}
<p>根据id升序排</p>
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id' }}
</div>
</body>
</html>