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>

 

posted @ 2017-06-06 21:29  快乐的咸鱼  阅读(359)  评论(0)  编辑  收藏  举报