AngularJS 配置过滤器服务($filterProvider),实现自定义过滤器的功能(config())

本文介绍了如何在AngularJS中利用$filterProvider的config()方法配置自定义过滤器服务，通过实例代码详细解析了自定义过滤器的创建过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>