【AngularJS】—— 9 自定义过滤器
时间:2022-04-22
本文章向大家介绍【AngularJS】—— 9 自定义过滤器,主要内容包括实现方式、程序样例、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
AngularJS另一个特点就是提供了过滤器,可以通过操作UNIX下管道的方式,操作数据结果。
通过使用管道,可以便于双向的数据绑定中视图的展现。
过滤器在处理过程中,将数据变成新的格式,而且可以使用管道这种链式风格,还能接受附加的参数。
实现方式
下面看一下如何定义声明一个过滤器,首先依然是要创建我们自己的模块myAppModule
var myAppModule = angular.module("myApp",[]);
接下来在模块的基础上,创建过滤器:
myAppModule.filter("reverse",function(){
});
其中reverse是过滤器的名字,后面跟着过滤器的方法声明,在方法中返回另一个方法:
myAppModule.filter("reverse",function(){
return function(input,uppercase){
var out = "";
for(var i=0 ; i<input.length; i++){
out = input.charAt(i)+out;
}
if(uppercase){
out = out.toUpperCase();
}
return out;
}
});
内部返回的方法包含了两个参数,一个是输入的值,就是我们过滤器接受的值。
如果想要实现下面的过滤器:
name | reverse
则input就是其中name代表的值。
后面的参数是可选的,我们这里接受uppercase这个bool值,判断是否要进行大小写转换。
内部实现的代码,就没必要解释了。最后返回过滤后的字符串即可。
程序样例
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body>
<div ng-controller="myAppCtrl">
name:{{ name }}<br>
reverse name:{{ name | reverse }}<br>
reverse&uppercase name:{{ name | reverse:true }}
</div>
<script type="text/javascript">
var myAppModule = angular.module("myApp",[]);
myAppModule.controller("myAppCtrl",["$scope",function($scope){
$scope.name = "xingoo";
}]);
myAppModule.filter("reverse",function(){
return function(input,uppercase){
var out = "";
for(var i=0 ; i<input.length; i++){
out = input.charAt(i)+out;
}
if(uppercase){
out = out.toUpperCase();
}
return out;
}
});
</script>
</body>
</html>
运行结果
- python 多进程设置 整理版本1
- 11g Dataguard中的snapshot standby特性(r8笔记第49天)
- 物化视图刷新结合ADG的尝试 (r8笔记第47天)
- 关于CPU使用率高的awr分析(r8笔记第46天)
- 图形工具和命令行的博弈-swingbench配置(r8笔记第63天)
- 手把手教你用LDA特征选择
- 一个关于执行计划的小问题测试(r8笔记第60天)
- 【Go 语言社区】www.golangweb.com通过工信部审核,正式挂牌社区域名
- golang 算法课程 正式开课--第一季 第1节
- 在 Mac OS X 装不上 TensorFlow?看了这篇就会装
- 利用python内置函数,快速统计单词在文本中出现的次数
- 物化视图刷新结合ADG的尝试(二)(r8笔记第57天)
- python 下利用os模块创建目录以及巧妙使用if not os.path.exits()创建
- Python读取json文件,并转化为字典进行提取字段(出现索引must be int,not str)解决方案
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- OracleDG 环境主备业务数据不同步备库报ORA-600错误的处理过程
- Xcode清理模拟器文件
- 【Android 音视频开发打怪升级:FFmpeg音视频编解码篇】六、FFmpeg简单合成MP4:视屏解封与重新封装
- 32.opengl高级光照-延迟着色法
- Tsunami:一款功能强大的通用网络安全扫描工具
- Hive查看表/分区更新时间
- 直接通过手机抓取GPS的qxdm日志
- uniapp常用提示框uni.showToast(OBJECT)
- MySQL 索引(3)
- TS 设计模式04 - 适配器模式
- WebRTC | 原理、架构、框架目录、运行机制、核心类、PeerConnection调用过程等详解
- sql注入总结笔记
- WebRTC | Web服务器原理、Nodejs工作原理、Nodejs事件处理流程、V8引擎等要点解析
- OpenGL ES 3.0 | 围绕HelloTriangle实战案例 展开 渲染流程分析
- 基于 Kotlin + Netty 实现一个简单的 TCP 自定义协议