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文 ...
随机推荐
- mysql如果主库宕机，如何解决？
两种情况服务器down机,数据库down机 如果此时需要切从库 1.先show processlist\G,查看状态 如果看到两个状态,说明此时的从库和主库是同步的 state: waiting fo ...
- java 创建包含枚举的常量类
参考 public class Constants { public static enum ServiceStatus{ NORMAL(1,"正常办理"),CHANGEING(2 ...
- PL/SQL编程—分页功能（存储过程）
SQL),bookname ),publish )); Table created SQL> SQL> create or replace procedure sp_add_book(bo ...
- HDU - 6386 Age of Moyu 2018 Multi-University Training Contest 7 (Dijkstra变型)
题意:N个点M条边的无向图,每条边都有属于自己的编号,如果一条路径上的边编号都相同,那么花费仅为1:改变至不同编号的路径,花费加1,无论这个编号之前是否走过. 分析:记录每个点的最小花费,再用set维 ...
- redis 笔记01 简单动态字符串、链表、字典、跳跃表、整数集合、压缩列表
文中内容摘自<redis设计与实现> 简单动态字符串 1. Redis只会使用C字符串作为字面量,在大多数情况下,Redis使用SDS(Simple Dynamic String,简单动态 ...
- Hadoop中RPC协议小例子报错java.lang.reflect.UndeclaredThrowableException解决方法
最近在学习传智播客吴超老师的Hadoop视频,里面他在讲解RPC通信原理的过程中给了一个RPC的小例子,但是自己编写的过程中遇到一个小错误,整理如下: log4j:WARN No appenders ...
- iconfont的使用
首先你要有一个图标库的账号,我们使用的是阿里矢量图标库,其次你要有一套已经设计好的图标原图.如果你具备了这些,就可以和我一起看iconfont的使用姿势了. 写在前面 不结合其他矢量库或UI框架一起使 ...
- Linux下代理服务器(proxy)配置
Linux下有很多程序都只有命令行接口,对于这类程序,它们通过代理服务器(proxy)访问网络的方式也不尽相同.在本文中Easwy总结了一些常用Linux程序配置代理服务器的方法. [ 通用代理服务器 ...
- 【JavaScript】键盘控制小球
参考: 1.Simple Canvas Game 2.javaScript 事件监听 <!DOCTYPE html> <html> <head> <meta ...
- ubuntu 安装pip
apt-get install python3-pip