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

①过滤器创建
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. ununtu16.04+python3+selenium+firefox环境搭建

    一.初始配置: 1.安装完系统并配置好地址及DNS.2.设置root密码: sudo passwd root 3.更改云源: sudo cp /etc/apt/sources.list /etc/ap ...

  2. HDU - 6406 Taotao Picks Apples (RMQ+dp+二分)

    题意:N个高度为hi的果子,摘果子的个数是从位置1开始从左到右的严格递增子序列的个数.有M次操作,每次操作对初始序列修改位置p的果子高度为q.每次操作后输出修改后能摘到得数目. 分析:将序列分为左.右 ...

  3. mongodb的安装使用和pymongo基本使用

    (1) mongodb的安装 下载tgz解压后,需要添加相应的环境变量才能在终端直接启动mongod. mongodb数据存储在/data/db中,需要手动创建目录树,同时mongod执行的时候如果权 ...

  4. 一般处理程序中 C#中对象转化为Json对象

    namespace: Newtonsoft.Json; context.Response.ContentType = "application/text"; 注:这里为什么不是 J ...

  5. jenkins添加GIT repository报错

    添加了ssh互信,但一直提示如下错误. Failed to connect to repository : Command "git ls-remote -h git@git.xxx.cn: ...

  6. [算法] 将单链表的每K个节点之间逆序

    题目 给定一个单链表的头结点,实现一个调整单链表的函数,使得每K个节点之间逆序,如果最后不够K个节点一组,则不调整最后几个节点. 解答 使用栈结构 import java.util.Stack; pu ...

  7. 混合开发的大趋势之一React Native之Image (脑动理解)

    文章是宝宝自己写的,你可以转走,标明哪来的就行王亟亟的大牛之路 国庆这些天要么旅游要么WOW,感觉整个人都废了.. 直接从黄种人晒成了非洲大酋长..然而还是无橙,这礼拜要做7天,昨天把单元测试的东西整 ...

  8. TrappingRainWater

    问题描述: Given n non-negative integers representing an elevation map where the width of each bar is 1, ...

  9. MarkDown中锚的使用

    经常使用Markdown配合Mou编辑器来些点总结和文档,但是其中需要前后引用或链接时markdown木有提供直接的方式.当然,Markdown支持嵌入式HTML语法,so..实现起来也没啥问题. 具 ...

  10. Eclipse的编码格式设置

    在使用Eclipse开发中,许多文件编码默认是ISO-8859-1,不支持中文(如常用的JSP).这样我们每次建文件都要手动改编码,其实我们可以在设置文件默认编码,今后再创建时就不用每次修改编码了, ...