AngularJS 过滤器
AngularJS 过滤器
| 过滤器 | 描述 |
|---|---|
| currency | 格式化数字为货币格式。 |
| filter | 从数组项中选择一个子集。 |
| lowercase | 格式化字符串为小写。 |
| orderBy | 根据某个表达式排列数组。 |
| uppercase | 格式化字符串为大写。 |
表达式中添加过滤器
<div ng-app="myApp" ng-controller="personCtrl"><p>姓名为 {{ lastName | uppercase }}</p></div>
currency 过滤器
<div ng-app="myApp" ng-controller="costCtrl">
<input type="number" ng-model="quantity">
<input type="number" ng-model="price">
<p>总价 = {{ (quantity * price) | currency }}</p>
</div>
向指令添加过滤器
过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。
orderBy 过滤器根据表达式排列数组：
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
过滤输入
<div ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
</div>
自定义过滤器
以下实例自定义一个过滤器 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() { //可以注入依赖
return function(text) {
return text.split("").reverse().join("");
}
});
</script>
1、uppercase，lowercase 大小写转换
{{ "lower cap string" | uppercase }} // 结果：LOWER CAP STRING
{{ "TANK is GOOD" | lowercase }} // 结果：tank is good
2、date 格式化
{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25
3、number 格式化（保留小数）
{{149016.1945000 | number:2}}
4、currency货币格式化
{{ 250 | currency }} // 结果：$250.00
{{ 250 | currency:"RMB ￥ " }} // 结果：RMB ￥ 250.00
5、filter查找
输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。
filter 过滤器从数组中选择一个子集
// 查找name为iphone的行
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{'name':'iphone'} }}
6、limitTo 截取
{{"1234567890" | limitTo :6}} // 从前面开始截取6位
{{"1234567890" | limitTo:-4}} // 从后面开始截取4位
7、orderBy 排序
// 根id降序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id':true }}
// 根据id升序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id' }}
<!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:'id'">
<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="Dhx";
$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>
