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

①过滤器创建
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 自定义过滤器的创建和使用的更多相关文章

  1. vue自定义过滤器的创建和使用

    1.简单介绍   过滤器的作用:实现数据的筛选.过滤.格式化.   过滤器的本质是一个有参数,有返回值的方法.   过滤器可以用在两个地方:双花括号插值和v-bind表达式(后者从2.1.0+开始支持 ...

  2. vue自定义过滤器的创建与使用

    原文地址 过滤器:生活中有很多例子,净水器 空气净化器 .过滤器的作用:实现数据的筛选.过滤.格式化. vue1.*版本是有内置的过滤器,但是在vue2.*所有的版本都已经没有自带的过滤器了. 1.过 ...

  3. flask框架下的jinja2模板引擎(2)(过滤器与自定义过滤器)

    flask框架下的jinja2模块引擎(1):https://www.cnblogs.com/chichung/p/9774556.html 这篇论文主要用来记录下 jinja2 的过滤器. 什么是过 ...

  4. django之创建第6-1个项目-自定义过滤器

    1.在站点blog目录下创建templatetags文件夹 2.templatetags目录下需要作为一个包来处理和调用其中的内容,需要有一个__init__.py文件 3.在templatetags ...

  5. 创建 AngularJS 自定义过滤器，带自定义参数

    Angularjs过滤器是 angularjs非常棒的特性之一.有朝一日,你可能需要使用自定义过滤器,幸运的是,你找到了这篇博文. 下面显示的是自定义过滤器长什么样子(请注意myfilter): &l ...

  6. 自定义模板语言之simple_tag和自定义过滤器

    扩展你的模板系统 一般是扩展模板的tag和filter两个功能.可以用来创建你自己的tag和filter功能库. 创建模板库 分为两步: 1. 首先决定由模板库在哪一个注册的app下放置,你可以放在一 ...

  7. angularJS自定义过滤器、服务和指令

    自定义过滤器 mainApp.filter('mayfilter',function(){ return function(input){ (过滤逻辑代码) } });   自定义创建指令 mainA ...

  8. AngularJs(八) 过滤器filter创建

    大纲 示例 过滤器的使用 创建过滤器 demo 这是整个示例demo 1.filter.js文件 angular.module("exampleApp", []) .constan ...

  9. Django中自定义过滤器的使用

    我在这里做的是: 从数据库查出id递增的一些信息,展示在前台. 编写一个过滤器判断查出数据的id是偶数的返回True 奇数返回False 1 创建项目,创建应用,注册应用,配置settings.py文 ...

随机推荐

  1. php如何实现定时任务,php定时任务方法,最佳解决方案,php自动任务处理

    php如何实现定时任务,php定时任务方法,最佳解决方案,php自动任务处理 Joe PHP 2012-01-18 定时任务对于php来说一直都是很多朋友的一个难题,但却很多地方都遇到了.比如说:游戏 ...

  2. 微信小程序将带来web程序员的春天！

    微信之父张小龙在年初那次演讲中曾表示:“我自己是很多年的程序员,我觉得我们应该为开发的团体做一些事情.”几个月后,微信正式推出微信应用号(即微信小程序)在互联网中掀起又一波热潮. 过去,对于很多开发者 ...

  3. Log4Net各参数API

    <?xml version="1.0" encoding="utf-8" ?> <configuration> <configSe ...

  4. python 课堂笔记-while

    #Author:zyl age_of_oldboy = 56 count = 0 while count < 3: guess_age = int(input("guess age:& ...

  5. C# 字符串中正则表达式的应用

    1.截取字符串中指定内容 {"weatherinfo":{"city":"北京","cityid":"1010 ...

  6. 【学习ffmpeg】打开视频文件，帧分析，并bmp保存关键帧

    http://www.tuicool.com/articles/jiUzua   http://blog.csdn.net/code_future/article/details/8646717 主题 ...

  7. Python3：Django连接Mysql数据库时出错，'Did you install mysqlclient or MySQL-python?'

    Python3:Django连接Mysql数据库时出错,'Did you install mysqlclient or MySQL-python?' 一.原因 因为Python版本问题,MySQLdb ...

  8. CSS3飘带状3D菜单

    在线演示 本地下载

  9. 微信小程序选择器

  10. java基础(3)--8种基本类型

    八种基本类型 数据类型分为两大类:基本类型,引用类型 基本类型有8种,除了基本类型(8种)以外任何类型都是引用类型.如: String 是引用类型 基本类型有8种(首字母是小写): 整数:byte, ...