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 自定义过滤器的创建和使用的更多相关文章
- vue自定义过滤器的创建和使用
1.简单介绍 过滤器的作用:实现数据的筛选.过滤.格式化. 过滤器的本质是一个有参数,有返回值的方法. 过滤器可以用在两个地方:双花括号插值和v-bind表达式(后者从2.1.0+开始支持 ...
- vue自定义过滤器的创建与使用
原文地址 过滤器:生活中有很多例子,净水器 空气净化器 .过滤器的作用:实现数据的筛选.过滤.格式化. vue1.*版本是有内置的过滤器,但是在vue2.*所有的版本都已经没有自带的过滤器了. 1.过 ...
- flask框架下的jinja2模板引擎(2)(过滤器与自定义过滤器)
flask框架下的jinja2模块引擎(1):https://www.cnblogs.com/chichung/p/9774556.html 这篇论文主要用来记录下 jinja2 的过滤器. 什么是过 ...
- django之创建第6-1个项目-自定义过滤器
1.在站点blog目录下创建templatetags文件夹 2.templatetags目录下需要作为一个包来处理和调用其中的内容,需要有一个__init__.py文件 3.在templatetags ...
- 创建 AngularJS 自定义过滤器，带自定义参数
Angularjs过滤器是 angularjs非常棒的特性之一.有朝一日,你可能需要使用自定义过滤器,幸运的是,你找到了这篇博文. 下面显示的是自定义过滤器长什么样子(请注意myfilter): &l ...
- 自定义模板语言之simple_tag和自定义过滤器
扩展你的模板系统 一般是扩展模板的tag和filter两个功能.可以用来创建你自己的tag和filter功能库. 创建模板库 分为两步: 1. 首先决定由模板库在哪一个注册的app下放置,你可以放在一 ...
- angularJS自定义过滤器、服务和指令
自定义过滤器 mainApp.filter('mayfilter',function(){ return function(input){ (过滤逻辑代码) } }); 自定义创建指令 mainA ...
- AngularJs(八) 过滤器filter创建
大纲 示例 过滤器的使用 创建过滤器 demo 这是整个示例demo 1.filter.js文件 angular.module("exampleApp", []) .constan ...
- Django中自定义过滤器的使用
我在这里做的是: 从数据库查出id递增的一些信息,展示在前台. 编写一个过滤器判断查出数据的id是偶数的返回True 奇数返回False 1 创建项目,创建应用,注册应用,配置settings.py文 ...
随机推荐
- rsync+inotify实时同步
!!!在安装前要先确保,rsync daemon服务配置成功,在安装inotify-tools前先确认你的linux内核是否达到了2.6.13,并且在编译时开启CONFIG_INOTIFY选项,也可以 ...
- $python打包工具pyinstaller的用法
pyinstaller是一个很好用的python打包工具,在Windows环境下可以将python脚本打包成一个exe可执行文件,并且脚本中所依赖的各种第三方库在打包时候都会被统一处理到一起,这样打包 ...
- git指令整理汇总
Git 1.git init 创建版本库,初始化 2.git add 向git添加文件,把文件添加到版本库 3.git log 告诉我们历史记录 4.git commit -m ‘’ 提交修改 ...
- 配置火星板(MarS Board)的启动参数
昨天终于拿到了MarS Board.本来上周就应该到的,结果销售人员给我发了块BeagleBone Black... 要是给我的是Sabre Lite也就算了.发错货总是消费者吃亏,好像没怎么听说过占 ...
- CreateWindow创建无边框 可拉伸窗体
createwindow 定义 HWND WINAPI CreateWindow( _In_opt_ LPCTSTR lpClassName, _In_opt_ LPCTSTR lpWindowNam ...
- 20145201 《Java程序设计》第三周学习总结
20145201 <Java程序设计>第三周学习总结 教材学习内容总结 本周学习了课本第四.五章内容,即认识对象和对象封装. 第四章 认识对象 4.1类与对象 定义类 要产生对象必须先定义 ...
- QT的基本数据类型
QT的基本数据类型(转) qint8:signed char 有符号8比特数据 qint16:signed short 16位数据类型 qint32:signed int. 32位有符号数据类型 qi ...
- idea技巧
写在前面 以前一直用的elipce,如今入坑IntelliJ IDEA,没想到啊.深深的爱上了它,强大到无所不能: "工欲善其事必先利其器",IntelliJ IDEA作为一个非常 ...
- AngularJS的思考
AngularJS实践 什么是AngularJS AngularJS的核心理念是什么? 在我看来,Angualr的核心思想是:Template + Scope => HTML, Template ...
- spring的几个通知（前置、后置、环绕、异常、最终）
1.没有异常的 2.有异常的 1.被代理类接口Person.java package com.xiaostudy; /** * @desc 被代理类接口 * * @author xiaostudy * ...