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. 分布式事务、XA、两阶段提交、一阶段提交

    本文原文连接:http://blog.csdn.net/bluishglc/article/details/7612811 ,转载请注明出处! 1.XA XA是由X/Open组织提出的分布式事务的规范 ...

  2. 驱动力—— 通信引擎（上）—— ESFramework 4.0 进阶（03）

    在ESFramework 4.0 进阶(02)-- 核心:消息处理的骨架流程一文中我们详细介绍了ESFramework中消息处理的骨架流程,并且我们已经知道,ESFramework中的所有通信引擎使用 ...

  3. @+android:id的一些记录

    在修改Settings模块的APN列表时,遇到了类似标题中的一些写法. 在网上查了一下: 加上android:表示引用android.R.id里面定义的id资源,如果android.R.id里面确实有 ...

  4. javascript动画效果之多物体缓冲运动

    这个是通过一个for循环控制的三个li标签,被鼠标触发则会有一个宽度增加和减少的事件 html和css同样写在一起方便察看,这里就是简单的布局,重点在js <!DOCTYPE html> ...

  5. NGUI等比缩放

    /// <summary> /// UI 等比缩放 /// </summary> static private void AdaptiveUI() { ; ; UIRoot u ...

  6. Tomcat 启动报错：javax.naming.NamingException: No naming context bound to this class loader

    分析原因:在类中使用了Log .只是在项目lib路径下添加了slf4 的jar包,在Tomcat\lib下未添加 解决方案:将slf4的jar包放到tomcat\lib下.

  7. mysql无法启动，一直处于启动状态解决【Mac osx 】

    最近,遇到一个问题,就是mac 使用homebrew 安装了mysql,今天使用mysql.server start,mysql无法启动了,restart还找不到pid,说明服务并没有启动! 错误如下 ...

  8. 编译OpenGL代码时发生 Inconsistency detected by ld.so: dl-version.c: 224: _dl_check_map_versions: Assertion `needed != ((void *)0)' failed! 错误的解决方案

    注:本解决方案适用于使用N卡的PC 出现该错误 , 一般是由于开源的nouveau驱动和Nvidia专有驱动冲突导致的 .在解决该问题时 , 尝试过卸载 N 卡专有驱动 , 仅使用开源nouveau驱 ...

  9. Chapter 2 Open Book——5

    I was relieved that I had the desk to myself, that Edward was absent. 我能一个人一张桌子很开心,就因为Edward 没来. I t ...

  10. URLEncode和URLDecoder作用

    一.基本原理 对于URL传递到后台,会对其中的有些字符进行编码,以下是我百度到的一些资料. 网页中的表单使用POST方法提交时,数据内容的类型是 application/x-www-form-urle ...