基本介绍

在AngularJS中使用过滤器格式化展示数据,在“{{}}”中使用“|”来调用过滤器,使用“:”传递参数。

基本使用

过滤器可以串起来使用,只要用   |  来衔接就行了,可以将上次返回的结果,作为下次的参数再次进行处理,所以 | 也被称为是管道符

  1. 1currency将数值格式化为货币格式
  2. 2date日期格式化,年(y)、月(M)、日(d)、星期(EEEE/EEE)、时(H/h)、分(m)、秒(s)、毫秒(.sss),也可以组合到一起使用。
  3. 3filter在给定数组中选择满足条件的一个子集,并返回一个新数组,其条件可以是一个字符串、对象、函数
  4. 4jsonJavascrip对象转成JSON字符串。
  5. 5limitTo取出字符串或数组的前(正数)几位或后(负数)几位
  6. 6lowercase将文本转换成小写格式
  7. 7uppercase将文本转换成大写格式
  8. 8number数字格式化,可控制小位位数
  9. 9orderBy对数组进行排序,第2个参数可控制方向
  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="App">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="../libs/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <ul ng-controller="DemoController">
  10. <li>{{price|currency:'¥'}}</li>
  11. <li>{{now|date:'yy/mm/dd'}}</li>
  12. <li>{{now|date:'yy/MM/dd hh:mm:ss'}}</li>
  13. <li>{{items|filter:'s'}}</li>
  14. <li>{{students|filter:{age:18} }}</li>
  15. <li>{{students|json}}</li>
  16. <li>{{students|limitTo:-2}}</li>
  17. <li>{{str|uppercase}}</li>
  18. <li>{{str|lowercase}}</li>
  19. <li>{{num|number:4}}</li>
  20. <li>{{items|orderBy:'':true}}</li>
  21. <li>{{students|orderBy:'age':false}}</li>
  22. <li>{{str|uppercase|limitTo:-4}}</li>
  23. </ul>
  24. <script>
  25. var App = angular.module('App', []);
  26. App.controller('DemoController', ['$scope', function ($scope) {
  27. $scope.price = 11.11;
  28. $scope.now = new Date();
  29. $scope.items = ['html', 'css', 'js'];
  30. $scope.students = [
  31. {name: '小明', age: 18},
  32. {name: '小红', age: 11},
  33. {name: '小雪', age: 19}
  34. ];
  35. $scope.str = 'Hello World';
  36. $scope.num = 10.2345;
  37. }]);
  38. // 过滤器:将数据格式化数据 在{{}}中使用|来调用过滤器,用:传递参数
  39. // 时间过滤器是M大写可以区分时分秒的分
  40. // 如果过滤对象的时候 需要空格
  41. // limitTo 可以截取数组或者字符串 -2 值是负值代表从右边截取
  42. // 这些指定可以相互串起来用
  43. </script>
  44. </body>
  45. </html>

Angular——内置过滤器的更多相关文章

  1. angular内置过滤器-filter

    这篇文章来讲解一下angular内置的filter过滤器. 没错,这个过滤器的名字,就叫'filter',虽然自定义过滤器也是使用module.filter()...但是不要混淆了,这个filter就 ...

  2. angularjs 构建主页 内置过滤器、日期的格式化

    从构建负责管理主屏幕的 MainController 开始.在这个 MainController 控制器内,只需设置一个每秒运转一次,同时更新一个局部作用域变量的延时 angular.module(' ...

  3. apache shiro内置过滤器 标签 注解

    内置过滤器 anon(匿名)  org.apache.shiro.web.filter.authc.AnonymousFilter authc(身份验证)       org.apache.shiro ...

  4. AngularJS复习-----内置过滤器和内置服务

    AngularJS中的内置服务(共30多个): $http 发送http请求,主要用于进行异步数据请求的功能实现,这个服务主要封装了XMLHttpRequest对象和JSONP数据访问模式来完成远程请 ...

  5. Asp.Net Core MVC框架内置过滤器

    第一部分.MVC框架内置过滤器 下图展示了Asp.Net Core MVC框架默认实现的过滤器的执行顺序: Authorization Filters:身份验证过滤器,处在整个过滤器通道的最顶层.对应 ...

  6. Django内置过滤器详解附代码附效果图--附全部内置过滤器帮助文档

    前言 基本环境 Django版本:1.11.8 Python版本:3.6 OS: win10 x64 本文摘要 提供了常用的Django内置过滤器的详细介绍,包括过滤器的功能.语法.代码和效果示例. ...

  7. angular内置指令相关知识

    原文地址 https://www.jianshu.com/p/5a5b43a8e91f 大纲 1.angular指令的分类 2.angular指令之——组件 3.angular指令之——属性指令 (n ...

  8. Shiro内置过滤器

    Shiro内置过滤器 DefaultFilter 枚举类定义了shiro所有的默认过滤器. package org.apache.shiro.web.filter.mgt; public enum D ...

  9. AngularJS提供的内置过滤器

    1. currencycurrecy过滤器可以将一个数值格式化为货币格式.用{{ 123 | currency }}来将123转化成货币格式.currecy过滤器允许我们自己设置货币符号.默认情况下会 ...

随机推荐

  1. 子元素设置margin-top,父元素也受影响

    这个问题困惑了非常久.尽管没有大碍早就摸出来怎么搞定它.但始终不明确原因出在哪里,假设仅仅是IE有问题我也不会太在意.可问题是全部上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事, ...

  2. Installation error: INSTALL_FAILED_VERSION_DOWNGRADE Android

    我们在安装新的 APk 的时候.会出现 Installation error: INSTALL_FAILED_VERSION_DOWNGRADE 原因:  是由于 androidversionCode ...

  3. 【转】winform 程序实现一次只能打开一个该程序

    ref: http://www.jb51.net/article/17747.htm //在程序的main函数中加入以下代码 bool createdNew; System.Threading.Mut ...

  4. webpack—入门

    点击进入webpack官网.,开始教程时,建议先学习ES6语法,也请先观看本篇Windows符号介绍文章,当所有webpack内容学习完后,会有一个专门的介绍 webpack四个核心概念(从官网入门— ...

  5. 【POJ 3122】 Pie (二分+贪心)

    id=3122">[POJ 3122] Pie 分f个派给n+1(n个朋友和自己)个人 要求每一个人分相同面积 但不能分到超过一个派 即最多把一整个派给某个人 问能平均分的最大面积 二 ...

  6. Android架构的简单探讨(一)

    在CSDN上看到这样一篇译文,虽然最终的解决方案要按照自己特定的项目去设计,但该文还是引起了很多自己的共鸣,原文猛戳这里. 这是他提出的基于Messaging的MVC框架: 其中包含的设计思想在于:哪 ...

  7. 容器ConcurrentHashMap原理(学习)

    一.概述 HashMap 是非线程安全的,在不考虑性能问题的时候,我们的解决方案有 Hashtable 或者Collections.synchronizedMap(hashMap),这两种方式基本都是 ...

  8. 【UVa 10881】Piotr's Ants

    Piotr's Ants Porsition:Uva 10881 白书P9 中文改编题:[T^T][FJUT]第二届新生赛真S题地震了 "One thing is for certain: ...

  9. [翻译]NUnit--前言(一)

    前言: 翻译这个系列主要是自己在学习NUnit之时看英文文档大部分能看懂但是有些还是功底不足,所以在方便自己以后再学习的时候可以快速查找,也能够加深印象以及掌握的更好.同时在搜索网上关于NUnit系列 ...

  10. ODB(C++ ORM)用Mingw的完整编译过程

    用mingw官方的GCC4.7.2编译libodb后,并用odb compiler对hello示例生成odb的"包裹"代码,编译链接总是不能通过,下面是编译example/hell ...