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. 多线程简单实例（1）真的需要synchronized么？

    说道多线程的安全问题,很多人想到就就是加锁.用到synchronized关键字. 那就要先说说synchronized问什么能够保证线程安全了. 首先要了解线程的工作方式:线程工作分为工作内存和主内存 ...

  2. .h（头文件） .lib（库文件） .dll（动态链接库文件） 之间的关系和作用的区分

    .h头文件是编译时必须的,lib是链接时需要的,dll是运行时需要的.附加依赖项的是.lib不是.dll,若生成了DLL,则肯定也生成 LIB文件.如果要完成源代码的编译和链接,有头文件和lib就够了 ...

  3. Qt学习之路MainWindow学习过程中的知识点

    一.Qt的GUI程序有一个常用的顶层窗口,叫做MainWindow MainWindow继承自QMainWindow.QMainWindow窗口分成几个主要的区域:   二.QAction类 QAct ...

  4. 最长上升子序列 LIS(Longest Increasing Subsequence)

    引出: 问题描述:给出一个序列a1,a2,a3,a4,a5,a6,a7….an,求它的一个子序列(设为s1,s2,…sn),使得这个子序列满足这样的性质,s1<s2<s3<…< ...

  5. 126邮箱发送邮件python实现

    126邮箱发送邮件python实现 from email.mime.text import MIMEText from email.utils import formataddr import smt ...

  6. python之路第五篇之装饰器:（进阶篇）

    装饰器: 学前必备知识: def f1(): print "f1" f1() #表示函数执行 f1 #表示函数,指向内存地址 f1 = lambda x: x + 1 f1() # ...

  7. 机器学习理论提升方法AdaBoost算法第一卷

    AdaBoost算法内容来自<统计学习与方法>李航,<机器学习>周志华,以及<机器学习实战>Peter HarringTon,相互学习,不足之处请大家多多指教! 提 ...

  8. Google Authenticator 如何集成（U盾的实现原理相同）

    Google Authenticator是一个类似U盾的二次验证工具,Google提供了它的开源客户端(https://github.com/google/google-authenticator)里 ...

  9. BS4爬取糗百

    -- coding: cp936 -- import urllib,urllib2 from bs4 import BeautifulSoup user_agent='Mozilla/5.0 (Win ...

  10. 一些实用的JQuery代码片段收集(筛选，搜索，样式，清除默认值，多选等)

    //each遍历文本框 清空默认值 $(".maincenterul1").find("input,textarea").each(function () { ...