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文 ...
随机推荐
- beego——多种格式的数据输出
beego当初设计的时候就考虑了API功能的设计,而我们在设计API的时候经常是输出JSON或者XML数据,那么beego提供了这样的方式直接输出: 1.JSON格式输出 func (this *Ad ...
- Python 中全局变量的实现
一.概述 Python 中全局变量的使用场景不多,但偶尔也有用武之处. 如在函数中的初始化,有时需要从外部传入一个全局变量加以控制.或者在函数中,使用连接池时,也可能有使用全局变量的需要. 广义上的全 ...
- Divide by Zero 2017 and Codeforces Round #399 (Div. 1 + Div. 2, combined) A. Oath of the Night's Watch
地址:http://codeforces.com/problemset/problem/768/A 题目: A. Oath of the Night's Watch time limit per te ...
- cdoj1342郭大侠与甲铁城
地址:http://acm.uestc.edu.cn/#/problem/show/1342 题目: 郭大侠与甲铁城 Time Limit: 1500/800MS (Java/Others) ...
- 在linux下打开文件出现^M，^H
0 Problem 在服务器上跑keras实验,然后用tee指令把实验结果保存在文本文件中. 文本文件在本机linux下用vim打开文件时会出现^M,^H.用sublime打开也会出现奇怪的字符. 1 ...
- 理解 JavaScript call()/apply()/bind()
理解 JavaScript this 文章中已经比较全面的分析了 this 在 JavaScript 中的指向问题,用一句话来总结就是:this 的指向一定是在执行时决定的,指向被调用函数的对象.当然 ...
- MapReduce:给出children-parents（孩子——父母）表，要求输出grandchild-grandparent（孙子——爷奶）表
hadoop中使用MapReduce单表关联案例: MapReduce:给出children-parents(孩子——父母)表,要求输出grandchild-grandparent(孙子——爷奶)表. ...
- 《Maven实战》第6章 仓库
6.1什么是Maven仓库? Maven仓库:存储所有Maven项目共享的构件的统一位置. Maven仓库的作用:Maven项目仅需声明依赖坐标,即可在需要的时候自动根据坐标找到仓库中的构件. 6.2 ...
- Effective C++ 条款04：确定对象被使用前已经先被初始化
规则一 永远在使用对象之前将它初始化 int x = 0; const char* text = "A C-style string"; double d; std:: cin & ...
- MVC viewbag & viewdata
弱类型:ViewData[""] 动态型:ViewBag dynamic ViewData 是字典型的(Dictionary),ViewBag 不再是字典的键值对结构,而是dyna ...