js框架——angular.js(3)
1. 过滤filter
过滤就是将内容进行筛选或者转换或者两者都有,一般的表示方式就是在变量后面添加"|",然后加上过滤条件,如——
{{name|currency}}
这个currency过滤器可以将值转变成货币的格式。
另外,这个货币的格式也可以设置——
{{name|currency: "Euro €" }}
这样,输入1234,就会显示:
123,4 Euro €
2. 自定义过滤器
过滤器当然可以自定义,毕竟系统给定的过滤器根本不够用。
<body ng-app="MyApp">
<input type="text" ng-model="text" placeholder="Enter text"/>
<p>Input: {{ text }}</p>
<p>Filtered input: {{ text | reverse }}</p>
</body>
var app = angular.module("MyApp", []); app.filter("reverse", function(input) { var result = "";
input = input || ""; for (var i=0; i<input.length; i++) {
result = input.charAt(i) +"_____>" +result;
alert(result)
}
//巧妙的实现字符串翻转
//笨的方法
//var result = input.split('').reverse().join('') return result; });
如上就是一个自定义的过滤器,简单来说就是编写一个带有参数的函数,将参数输入后,得到一组返回的数据,这个返回数据就是转换后的字符串。
列举一些常用的过滤器:
exclude:排除
<ul ng-init="names = ['Peter', 'Anton', 'John']">
<li ng-repeat="name in names | exclude:'Peter'">
<span>{{name}}</span>
</li>
</ul>
js框架——angular.js(3)的更多相关文章
- js框架——angular.js(6)
1. ng-class 这个指令是用来绑定一个或者多个css代码.它的值一般是一个表达式,也可以是函数什么的,只要返回的确实是一个类的名字就可以—— ng-class="nextPageDi ...
- js框架——angular.js(5)
1. 3种过滤方式 <html> <head> <meta charset='utf-8'> <script src="js/angular.js& ...
- js框架——angular.js
这是一个前端用的框架,使用简单.详细介绍这里就不写了,主要介绍其语法和作用—— 1. 声明一个angular 如果想要使用一个angular代码,则需要在[想要使用angular的范围内写上ng-ap ...
- js框架——angular.js(2)
1. 模块的利用扩充 模块的名称也可以当做变量使用,例如: <body ng-app> <label><input type="checkbox" n ...
- js框架——angular.js(4)
1. angular中的对象 其实也不用多说的,前台是可以提取后台定义的对象的—— <body ng-app="MyApp"> <div ng-controlle ...
- 青出于蓝而胜于蓝 — Vue.js对Angular.js的那些进步
Angular.js与Vue.js是非常有渊源的两款前端框架,据Vue.js的官方网站描述,在其早期开发时,灵感来源就是Angular.js.而在很多方面,Vue.js也正像是中国的那句古话,&quo ...
- Electron、Node.js、JavaScript、JQuery、Vue.js、Angular.js,layui,bootstrap
转载:https://blog.csdn.net/meplusplus/article/details/79033786 layui :是基于jquery库的封装开发. bootstrap:同样基于 ...
- vue.js与angular.js的区别(个人)
刚进入实训 讲师就要发一些什么比较高大上的东西,本人才疏学浅 浅浅的分享一下angularjs 和vue.js的区别.只是简单的理解一下 大神勿喷. 生实训之前学习的angular.js 只是理解了 ...
- Angular JS - 5 - Angular JS 模块和控制器
1.引入 1.5版本的angularjs,直接打印angular对象: --> <!DOCTYPE html> <html> <head lang="en ...
随机推荐
- TortoiseGit - 处理冲突
处理冲突 冲突:远程的master已经被其他人更新到 2repo add 12,但是自己当前的工作区在未pull到最新前,增加了1repo add 12的改动. 右击最新的节点,选择Merge to ...
- mvc路由参数注解
routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); //过滤掉禁止访问的路由 routes.MapRoute( name: &quo ...
- 调用CImg库显示WAV格式音频波形
最近在做傅里叶变换和小波变换时经常要通过显示波形来检验算法,但通过visual studio之类显示波形又显得麻烦,而且不能跨平台. CImg是一个跨平台的C++的图像处理库,提供的图像处理等功能十分 ...
- MyBatis 批量修改记录
<insert id="update" parameterType="java.util.List"> UPDATE setting SET con ...
- css font简写规则
是不是在很很多网站的公共样式中会看到这样的代码?font: 12px/150% Arial, Verdana, "\5b8b\4f53";意思为:字体大小/行高 字体族 " ...
- Python 修炼1
2016年11月21日 Python基础修炼第一篇 1.Python是什么?有什么优缺点呢? python是一个高级编程语言. 优点:开发效率比较高,不但有php写网页的功能,还有写后台的功能 缺点: ...
- Android 透明状态栏&着色状态栏
Android 5.0 及以上实现方式(android在5.0之后引入Material Design 实现方式相对简单) 透明状态栏,背景浸入状态栏 if (Build.VERSION.SDK_INT ...
- sql语句--查询语句(MySQL)
1.截取字符串 left(str, length),right(str, length),substring(str, pos, length) 原文:http://www.jb51.net/arti ...
- 当引用了Properties.Settings后,如果执行的时候,出现"配置系统无法初始化" 或者 某某节点不正确
自定义了一个 PowerConfig命名空间 PowerSettings.Settings 然后一个exe,引用了该dll,在app.cinfig里增加了配置项 <applicationSe ...
- mysql 表连接
1.子查询是指在另一个查询语句中的SELECT子句. 例句: SELECT * FROM t1 WHERE column1 = (SELECT column1 FROM t2); 其中,SELECT ...