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>