码迷,mamicode.com
首页 > 其他好文 > 详细

ng 自定义过滤器的创建和使用

时间:2017-06-06 23:26:50      阅读:244      评论:0      收藏:0      [点我收藏+]

标签:control   lang   htm   set   uppercase   ase   tle   过滤器   技术分享   

 

过滤器的本质就是一个方法,参数就是输入的值以及给过滤器指定的参数,返回值就是处理后要显示的值。

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

标签:control   lang   htm   set   uppercase   ase   tle   过滤器   技术分享   

原文地址:http://www.cnblogs.com/web-fusheng/p/6953741.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!