demo.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS</title>
<script src="angular.min.js"></script> <!-- 引入AngularJS框架 -->
</head>
<body ng-app="App">
<div ng-controller="DemoController">
<h3>{{name|myfilter}}</h3> <!-- 在视图中直接使用自定义的过滤器 -->
<h3>{{name2}}</h3> <!-- 在$scope模型中使用过滤器格式化后的数据 -->
</div>
<script>
var App = angular.module('App',[]);
// 每个内置服务都有一个对应的provider,可以通过provider配置服务。
// config配置服务(块) []表示依赖注入(可以注入多个依赖,同时配置多个服务)
// 通过配置$filterProvider来实现注册自定义过滤器服务
App.config(['$filterProvider',function($filterProvider) {
$filterProvider.register('myfilter',function() { //注册自定义的过滤器
return function(input) { //首字母大写
return input[0].toUpperCase() + input.slice(1); //首字母大写
}
});
}]);
// 控制器 可以在$scope模型中使用自定义的过滤器,也可以在视图中直接使用自定义的过滤器
App.controller("DemoController",['$scope','$filter',function($scope,$filter) {
$scope.name = "zhangsan";
var myfilter = $filter('myfilter');
$scope.name2 = myfilter($scope.name); //在$scope模型中使用自定义的过滤器服务
}]);
</script>
</body>
</html>