1、uppercase,lowercase 大小写转换

  1. {{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRING
  2. {{ "TANK is GOOD" | lowercase }} // 结果:tank is good

2、date 格式化

  1. {{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25

3、number 格式化(保留小数)

  1. {{149016.1945000 | number:2}}

4、currency货币格式化

  1. {{ 250 | currency }} // 结果:$250.00
  2. {{ 250 | currency:"RMB ¥ " }} // 结果:RMB ¥ 250.00

5、filter查找

输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。

filter 过滤器从数组中选择一个子集

  1. // 查找name为iphone的行
  2. {{ [{"age": 20,"id": 10,"name": "iphone"},
  3. {"age": 12,"id": 11,"name": "sunm xing"},
  4. {"age": 44,"id": 12,"name": "test abc"}
  5. ] | filter:{'name':'iphone'} }}

6、limitTo 截取

  1. {{"1234567890" | limitTo :6}} // 从前面开始截取6位
  2. {{"1234567890" | limitTo:-4}} // 从后面开始截取4位

7、orderBy 排序

  1. // 根id降序排
  2. {{ [{"age": 20,"id": 10,"name": "iphone"},
  3. {"age": 12,"id": 11,"name": "sunm xing"},
  4. {"age": 44,"id": 12,"name": "test abc"}
  5. ] | orderBy:'id':true }}
  6.  
  7. // 根据id升序排
  8. {{ [{"age": 20,"id": 10,"name": "iphone"},
  9. {"age": 12,"id": 11,"name": "sunm xing"},
  10. {"age": 44,"id": 12,"name": "test abc"}
  11. ] | orderBy:'id' }}

Angular js 过滤器 笔记(转自菜鸟教程)的更多相关文章

  1. Angular JS 学习笔记(自定义服务:factory,Promise 模式异步请求查询:$http,过滤器用法filter,指令:directive)

    刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...

  2. Angular JS 学习笔记(一)

    1. 菜鸟教程:http://www.runoob.com/angularjs/angularjs-tutorial.html 2. Angular JS中文网:http://www.apjs.net ...

  3. Angular.js学习笔记(三)

    一.过滤器 1.uppercase,lowercase 大小写转换{{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRI ...

  4. Angular.js 学习笔记

    AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. <!-- ng-app 指令定义一个 AngularJS 应用程序. ng-mod ...

  5. Angular JS 学习笔记(二)

    1. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面.AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定 ...

  6. Angular.js学习笔记 (二)

    用A链接对象解析url的组成 var url = 'https://www.baidu.com:8080/aaa/1.html?id=10#name'; var aLink = document.cr ...

  7. Angular.js学习笔记 (一)

    - angular中最重要的概念是指令(directive)- ng-model 是双向数据绑定的指令,效果就是将当前元素的value属性和模型中的[user.name]建立绑定关系### 模块(Mo ...

  8. angular.js学习笔记--概念总结

    好久没更新了,现在开始学习学习angularjs,并且把学习到的一些知识总结记录一下,方便以后查找以及希望能给初学者一些帮助!(由于本人也是初学ng所以各位慎重理解!) 废话不多说,开始! $root ...

  9. Angular.JS学习笔记——1

    内容来自:http://www.runoob.com/angularjs/angularjs-intro.html AngularJS 是一个 JavaScript 框架.它是一个以 JavaScri ...

随机推荐

  1. 洛谷 P1477 [NOI2008]假面舞会

    题目链接 题目描述 一年一度的假面舞会又开始了,栋栋也兴致勃勃的参加了今年的舞会. 今年的面具都是主办方特别定制的.每个参加舞会的人都可以在入场时选择一 个自己喜欢的面具.每个面具都有一个编号,主办方 ...

  2. C# Task超时规则

    需要知道以下的知识 正规的骚操作:https://stackoverflow.com/questions/4238345/asynchronously-wait-for-taskt-to-comple ...

  3. NodeJS使用SSL证书

    [From] https://segmentfault.com/q/1010000004705326 var options = { key: fs.readFileSync('../ssl/priv ...

  4. Linux总线设备驱动模型

    1. Linux2.6内核引入总线.设备.驱动模型来描述各种总线(PCI.USB.I2C.SPI)与外围设备及其驱动之间的关系. 2. 在Linux内核中,总线用bus_type结构来描述,定义于文件 ...

  5. List<Type> 随机排序

    public List<T> GetRandomList<T>(List<T> inputList){ //Copy to a array T[] copyArra ...

  6. js数组方法详解

    Array对象的方法-25个 /*js数组方法详解 */ /* * 1 concat() 用于连接多个数组或者值-------------- * 2 copyWithin() 方法用于从数组的指定位置 ...

  7. ansible 入门学习(一)

    一,ansible 目录结构 (来自于ansible权威指南) 二,ansible.cfg 配置项说明 /etc/ansible/ansible.cfg --> ———————————————— ...

  8. vue中watch的使用

    vue中watch的使用 vue中的watch是一个比较重要的概念,通过他我们可以检测data的变化,下面进行详细的介绍. watch定义方式如下: {[key: string]: string | ...

  9. TOJ 4393 Game

    描述 Bob always plays game with Alice.Today,they are playing a game on a tree.Alice has m1 stones,Bob ...

  10. Java入门系列-10-数组

    这篇文章为你搞懂2个问题 1.什么是数组,数组是干嘛用的? 2.数组如何使用? 考试结束后,老师给二狗安排了一项任务,统计班里40名同学的平均分.按照我们之前的做法,我们可以定义40个变量然后再相加除 ...