基本过滤器
- 基本用法 {{data|format}},数据|格式
- 代码
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
</head>
<body>
<div ng-controller="MainCtrl as mc">
{{ mc.name|uppercase}}
</div>
<script src="http://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript">
var myapp = angular.module("myapp", []);
myapp.controller("MainCtrl", [function() {
this.name = "lengyuexin"
}]);
</script>
</body>
</html>
- 效果图
- 其他不演示了,可以参考菜鸟教程
- http://www.runoob.com/angularjs/angularjs-filters.html
自定义过滤器
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
</head>
<body>
<div ng-controller="MainCtrl as mc">
<p>过滤前:{{mc.msg}}</p>
<p>过滤后:{{mc.msg|reverse}}</p>
</div>
<script src="http://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('app', []);
app.controller('MainCtrl',[function() {
this.msg = "hello";
}]);
app.filter('reverse', function() {
return function(text) {
return text.split("").reverse().join("");
}
});
</script>
</body>
</html>
- 效果图