AngularJS 过滤器

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="angular-1.6.3/angular.js"></script>

</head>

<body>

<div ng-app="myApp" ng-controller="myCtrl">

    名: <input type="text" ng-model="firstName"><br>

    姓: <input type="text" ng-model="lastName"><br>

    <br>

    姓名: {{(firstName | lowercase) + " " + (lastName | uppercase)}}

</div>

<script>

    var app = angular.module('myApp', []);

    app.controller('myCtrl', function($scope) {

        $scope.firstName = "John";

        $scope.lastName = "Doe";

    });

</script>

</body>

</html>

1、uppercase，lowercase 大小写转换

{{ "lower cap string" | uppercase }}   // 结果：LOWER CAP STRING

{{ "TANK is GOOD" | lowercase }}      // 结果：tank is good

2、date 格式化

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

3、number 格式化（保留小数）

{{149016.1945000 | number:2}}

4、currency货币格式化

{{ 250 | currency }}            // 结果：$250.00

{{ 250 | currency:"RMB ￥ " }}  // 结果：RMB ￥ 250.00

5、filter查找

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

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

 // 查找name为iphone的行

{{ [{"age": 20,"id": 10,"name": "iphone"},

{"age": 12,"id": 11,"name": "sunm xing"},

{"age": 44,"id": 12,"name": "test abc"}

] | filter:{'name':'iphone'} }}

6、limitTo 截取

{{"1234567890" | limitTo :6}} // 从前面开始截取6位

{{"1234567890" | limitTo:-4}} // 从后面开始截取4位

7、orderBy 排序

 // 根id降序排

{{ [{"age": 20,"id": 10,"name": "iphone"},

{"age": 12,"id": 11,"name": "sunm xing"},

{"age": 44,"id": 12,"name": "test abc"}

] | orderBy:'id':true }}

// 根据id升序排

{{ [{"age": 20,"id": 10,"name": "iphone"},

{"age": 12,"id": 11,"name": "sunm xing"},

{"age": 44,"id": 12,"name": "test abc"}

] | orderBy:'id' }}

AngularJS学习篇（七）的更多相关文章

  1. angularjs学习第七天笔记（系统指令学习）

    您好,接着在昨天对简单指令学习了解以后,今天开始学习了解angularjs中的系统指令 系统指令大部分都是以ng开始,这也是为什么在自定义指令命名时不要以ng开始的原因所在 系统指令在学习了分成两个部 ...

  2. AngularJS学习篇（二十四）

    AngularJS 应用 <html ng-app="myNoteApp"> <head> <meta charset="utf-8&quo ...

  3. AngularJS学习篇（二十三）

    AngularJS 路由 AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web applica ...

  4. AngularJS学习篇（二十二）

    AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或 ...

  5. AngularJS学习篇（二十一）

    AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <!doctyp ...

  6. AngularJS学习篇（二十）

    AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容: < ...

  7. AngularJS学习篇（十九）

    AngularJS Bootstrap 可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link r ...

  8. AngularJS学习篇（十八）

    AngularJS API AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如: 比较对象 迭代对象 转换对象 全局 API 函数使用 angular 对象进行访 ...

  9. AngularJS学习篇（十七）

    AngularJS 输入验证 <!DOCTYPE html> <html> <script src="http://apps.bdimg.com/libs/an ...

随机推荐

  1. Spring 3.x 读书笔记

    第一:如果使用BeanFactory作为Spring Bean的工厂类,则所有的bean都是在第一次使用该Bean的时候实例化 第二:如果使用ApplicationContext作为Spring Be ...

  2. JAVA多线程--Thinking in java

    聊聊并发:http://ifeve.com/java-concurrency-thread-directory/ 阻塞状态: sleep  可中断利用 interrupt方法 wait IO  不可中 ...

  3. MySQL所学所思所想

    MySQL更改线上配置方案思想:原则上,需要备机.备份工作准备到位,有参数调优配置方案.有配置回退方案.有应急切换备机方案.以上方案评审无问题,然后可以和客户约定实施的时间.服务中断时间,先向客户侧申 ...

  4. Dynamic Inversions 50个树状数组

    Dynamic Inversions Time Limit: 30000/15000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others ...

  5. php中常用的字符串大小写转换函数实例解释

    PHP字符串处理函数中,最为简单的几个函数,相关解释就不上了,直接看例子. PHP字符串处理函数中,最为简单的几个函数,相关解释就不上了,直接看例子. strtolower函数.strtoupper函 ...

  6. JAVA提高一：静态导入、可变参数、增强型for循环、装拆箱

    国庆假期已结束,假期8天,全部在家带娃,体会到了妻子的不容易,需要好好努力来多赚钱了,言归正传.10月份开始进去JAVA 高级语法知识学习,本节复习学习的为:静态导入.可变参数.增强型for循环.装拆 ...

  7. eclipse的插件开发-启动时间

    今天晚上看<深入理解java虚拟机>时,作者在书中有一段,eclipse优化的章节,其中涉及到了eclipse启动时间检测的插件开发 于是翻了翻资料,也开发了一个自己的插件 如图是开发后启 ...

  8. Web服务器自定义错误页面

    在使用Web服务器运行程序的时候,难免会出现诸如 404.500 等错误,那么如何针对不同的错误代码来自定义错误页面呢? 1.找到web项目的 web.xml 文件打开,添加以下标签代码,规则是 er ...

  9. jsp 四大域范围

     JSP中四种作用域的不同 作用域规定的是变量的有效期限. 1.如果把变量放到pageContext里,就说明它的作用域是page,它的有效范围只在当前jsp页面里. 从把变量放到pageCont ...

  10. 组件 layui 常用控件输入框

    一.普通输入框 input <div class="layui-form-item"> <label class="layui-form-label&q ...