AngularJS过滤器
- 过滤器通过管道字符(|)添加到表达式或指令中
- uppercase :将字符串格式化为大写
- lowercase :将字符串格式化为小写
- currency:将数字格式化为货币
- orderBy:根据表达式排列数组
- filter:从数组中选择一个子集
- 自定义过滤器
<div ng-app="App6" ng-controller="Controller4">
<p>uppercase :将字符串格式化为大写: <span>{{abc | uppercase}}</span></p>
<hr>
<p>lowercase :将字符串格式化为小写: <span>{{ABC | lowercase}}</span></p>
<hr>
x:<input type="text" ng-model="x" />
y:<input type="text" ng-model="y" />
<p>currency:将数字格式化为货币: {{x * y | currency}}</p>
<hr>
<p>orderBy:根据表达式排列数组</p>
<ul>
<li ng-repeat="x in names | orderBy:'address'">
{{x.name + "," + x.address}}
</li>
</ul>
<hr>
<p>filter:从数组中选择一个子集</p>
请输入过滤字符:<input type="text" ng-model="test" />
<ul>
<li ng-repeat="x in names | filter:test | orderBy:'address '">
{{(x.name | uppercase) + "," + x.address}}
</li>
</ul>
<hr>
<p>自定义过滤器: <span>姓名:{{msg|reverse}}</span></p>
</div>
<script>
var app = angular.module('App6', []);
app.controller('Controller4', function($scope) {
$scope.abc = "abc";
$scope.ABC = "ABC";
$scope.names = [{name:'q1', address:'qq'},{name:'w1', address:'ww'},{name:'e1', address:'ee'}];
$scope.msg = "wang";
});
app.filter('reverse', function() {
return function(text) {
return text.split("").reverse().join("");
}
});
</script>