ng 自定义过滤器的创建和使用
Posted 撒哈拉的雪
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ng 自定义过滤器的创建和使用相关的知识，希望对你有一定的参考价值。
过滤器的本质就是一个方法，参数就是输入的值以及给过滤器指定的参数，返回值就是处理后要显示的值。
①过滤器创建
var app = angular.module();
app.filter(‘名称’，func)//创建过滤器
在filter的第二参数，是一个方法，返回的是过滤器方法（有返回值）
app.filter(\'customFilter\', function () {
return function (value,arg1) {
console.log(value,arg1);
return \'$\'+value;
}
});
②调用过滤器（与自带过滤器用法一致）
{{ price | customFilter }}
效果：
代码：
<!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="UTF-8"> <script src="js/angular.js"></script> <title></title> </head> <body> <div ng-controller="myCtrl"> <p>{{price}}</p> <p>{{price | customFilter:\'￥\'}}</p> </div> <script> var app = angular.module(\'myApp\', [\'ng\']); //创建过滤器(过滤器的本质就是方法) app.filter(\'customFilter\', function () { return function (value,arg1) { console.log(value,arg1); return \'$\'+value; } }); app.controller(\'myCtrl\', function ($scope) { console.log(\'myCtrl func is called\'); $scope.price = 100; }) </script> </body> </html>
2.自定义大写转换的过滤器
①创建过滤器
给过滤器定义方法
toUppercase()
②调用
效果：
代码：
<!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="UTF-8"> <script src="js/angular.js"></script> <title></title> </head> <body> <div ng-controller="myCtrl"> <h1>{{name | myUppercase}}</h1> </div> <script> var app = angular.module(\'myApp\', [\'ng\']); //创建自定义的过滤器 app.filter(\'myUppercase\', function () { return function (value) { //实现对输入的处理 //返回，显示出来 return value.toUpperCase(); } }); app.controller(\'myCtrl\', function ($scope) { $scope.name = "Jack"; }) </script> </body> </html>
以上是关于ng 自定义过滤器的创建和使用的主要内容，如果未能解决你的问题，请参考以下文章