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文 ...
随机推荐
- Codeforces Round #468（div2）
A Friends Meeting 题意:有两个人在数轴上的不同位置,现在他们需要到一个位置碰面.每次每人只能向左或向右走1个单位,轮流进行.每个人第一次走时疲劳度+1,第二次走时疲劳度+2,以此类推 ...
- 5. Longest Palindromic Substring(最长回文子串 manacher 算法/ DP动态规划)
Given a string s, find the longest palindromic substring in s. You may assume that the maximum lengt ...
- PHP 权限管理
login页面 <form action="loginchuli.php" method="post"> <div>用户名:<in ...
- js原型 作用域
了解JavaScript原型链之前首先肯定要知道什么是原型. JavaScript中,原型是一个对象,通过原型可以实现属性的继承.既然原型是一个对象,那么任何一个对象都可以称为原型吗?是,记住它.什么 ...
- 20165114 《网络对抗技术》 Exp0 Kali安装与配置 Week1
目录: 一.kail的下载与安装 二.kali的网络设置 三.安装vmware-tools. 四.更新软件源. 五.共享文件夹 六.安装中文输入法 一.kail的下载与安装 VMware workst ...
- 20165101刘天野 2018-2019-2《网络对抗技术》Exp3 免杀原理与实践
20165101刘天野 2018-2019-2<网络对抗技术>Exp3 免杀原理与实践 1. 实践内容 1.1 正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil- ...
- Linux下Wireshark的网络抓包使用方法
Wireshark是世界上最流行的网络分析工具.这个强大的工具可以捕捉网络中的数据,并为用户提供关于网络和上层协议的各种信息.与很多其他网络工具一样,Wireshark也使用pcap network ...
- Aware接口
Aware接口: 例如: BeanNameAware接口是为了让自身Bean能够感知到,获取到自身在Spring容器中的id属性. 同理,其他的Aware接口也是为了能够感知到自身的一些属性. 比如实 ...
- java基础(7)--方法
方法 Math.sqrt() 取平方 Math.pow(2,3) 2的3次方 方法(Method),就是数学函数(Function). 业务方面: 是功能,是动作,一般采用动词命名. 数据层面:是利用 ...
- Java集合Collection&Map
Map<K,V>是键值对,K - 此映射所维护的键的类型,V - 映射值的类型.键值是一一对应的关系: Collection是只有键,底层也是由键值对,但是值的类型被隐藏起来. Colle ...