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)的更多相关文章

  1. js框架——angular.js(6)

    1. ng-class 这个指令是用来绑定一个或者多个css代码.它的值一般是一个表达式,也可以是函数什么的,只要返回的确实是一个类的名字就可以—— ng-class="nextPageDi ...

  2. js框架——angular.js(5)

    1. 3种过滤方式 <html> <head> <meta charset='utf-8'> <script src="js/angular.js& ...

  3. js框架——angular.js

    这是一个前端用的框架,使用简单.详细介绍这里就不写了,主要介绍其语法和作用—— 1. 声明一个angular 如果想要使用一个angular代码,则需要在[想要使用angular的范围内写上ng-ap ...

  4. js框架——angular.js(2)

    1. 模块的利用扩充 模块的名称也可以当做变量使用,例如: <body ng-app> <label><input type="checkbox" n ...

  5. js框架——angular.js(4)

    1. angular中的对象 其实也不用多说的,前台是可以提取后台定义的对象的—— <body ng-app="MyApp"> <div ng-controlle ...

  6. 青出于蓝而胜于蓝 — Vue.js对Angular.js的那些进步

    Angular.js与Vue.js是非常有渊源的两款前端框架,据Vue.js的官方网站描述,在其早期开发时,灵感来源就是Angular.js.而在很多方面,Vue.js也正像是中国的那句古话,&quo ...

  7. Electron、Node.js、JavaScript、JQuery、Vue.js、Angular.js,layui,bootstrap

    转载:https://blog.csdn.net/meplusplus/article/details/79033786 layui :是基于jquery库的封装开发. bootstrap:同样基于 ...

  8. vue.js与angular.js的区别(个人)

    刚进入实训 讲师就要发一些什么比较高大上的东西,本人才疏学浅  浅浅的分享一下angularjs 和vue.js的区别.只是简单的理解一下 大神勿喷. 生实训之前学习的angular.js 只是理解了 ...

  9. Angular JS - 5 - Angular JS 模块和控制器

    1.引入 1.5版本的angularjs,直接打印angular对象: --> <!DOCTYPE html> <html> <head lang="en ...

随机推荐

  1. HDU 2216 Game III(BFS)

    Game III Problem Description Zjt and Sara will take part in a game, named Game III. Zjt and Sara wil ...

  2. webapi中常用attribute标签

    HTTP Methods Instead of using the naming convention for HTTP methods, you can explicitly specify the ...

  3. MySQL慢日志分析-转载

    /path/mysqldumpslow -s c -t 10 /database/mysql/slow-log这会输出记录次数最多的10条SQL语句,其中: -s, 是表示按照何种方式排序,c.t.l ...

  4. ***参考Catch That Cow(BFS)

    Catch That Cow Time Limit : 4000/2000ms (Java/Other)   Memory Limit : 131072/65536K (Java/Other) Tot ...

  5. 注册表被篡改,请重新安装应用程序 acdphotoEdit

    破解之后,运行程序,提示“注册表被篡改,请重新安装应用程序”,反复重装,重启,都不行,删除注册表,重新安装后运行一次ACDSee,绿化,也不行,最后发现设置属性以管理员权限运行,ok,解决了

  6. iOS10访问用户权限的描述key值汇总

    https://developer.apple.com/library/content/documentation/General/Reference/InfoPlistKeyReference/Ar ...

  7. mysql数据库root密码忘记的修改

    注:此方法root的密码可以设置成功,但是重新开启服务时可能会出现中断的异常. 1.修改MySQL的root密码,需要先关闭MySQL的服务 2.进入命令行窗口,进入MySQL的安装路径bin目录下, ...

  8. android中对Bitmap图片设置任意角为圆角

    http://blog.csdn.net/l448288137/article/details/48276681 最近项目开发中使用到了圆角图片,网上找到的圆角图片控件大多比较死板,只可以全圆角.其中 ...

  9. html5实现滚动文字

    <div class="custom-notice"> <i class="icon-notice"></i> <ma ...

  10. applicationContext.xml 配置(扫描)

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...