首页 > 代码库 > ng 自定义过滤器的创建和使用

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 自定义过滤器的创建和使用