Angular——内置过滤器
基本介绍
在AngularJS中使用过滤器格式化展示数据,在“{{}}”中使用“|”来调用过滤器,使用“:”传递参数。
基本使用
过滤器可以串起来使用,只要用 | 来衔接就行了,可以将上次返回的结果,作为下次的参数再次进行处理,所以 | 也被称为是管道符
- 1、currency将数值格式化为货币格式
- 2、date日期格式化,年(y)、月(M)、日(d)、星期(EEEE/EEE)、时(H/h)、分(m)、秒(s)、毫秒(.sss),也可以组合到一起使用。
- 3、filter在给定数组中选择满足条件的一个子集,并返回一个新数组,其条件可以是一个字符串、对象、函数
- 4、json将Javascrip对象转成JSON字符串。
- 5、limitTo取出字符串或数组的前(正数)几位或后(负数)几位
- 6、lowercase将文本转换成小写格式
- 7、uppercase将文本转换成大写格式
- 8、number数字格式化,可控制小位位数
- 9、orderBy对数组进行排序,第2个参数可控制方向
- <!DOCTYPE html>
- <html lang="en" ng-app="App">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <script src="../libs/angular.min.js"></script>
- </head>
- <body>
- <ul ng-controller="DemoController">
- <li>{{price|currency:'¥'}}</li>
- <li>{{now|date:'yy/mm/dd'}}</li>
- <li>{{now|date:'yy/MM/dd hh:mm:ss'}}</li>
- <li>{{items|filter:'s'}}</li>
- <li>{{students|filter:{age:18} }}</li>
- <li>{{students|json}}</li>
- <li>{{students|limitTo:-2}}</li>
- <li>{{str|uppercase}}</li>
- <li>{{str|lowercase}}</li>
- <li>{{num|number:4}}</li>
- <li>{{items|orderBy:'':true}}</li>
- <li>{{students|orderBy:'age':false}}</li>
- <li>{{str|uppercase|limitTo:-4}}</li>
- </ul>
- <script>
- var App = angular.module('App', []);
- App.controller('DemoController', ['$scope', function ($scope) {
- $scope.price = 11.11;
- $scope.now = new Date();
- $scope.items = ['html', 'css', 'js'];
- $scope.students = [
- {name: '小明', age: 18},
- {name: '小红', age: 11},
- {name: '小雪', age: 19}
- ];
- $scope.str = 'Hello World';
- $scope.num = 10.2345;
- }]);
- // 过滤器:将数据格式化数据 在{{}}中使用|来调用过滤器,用:传递参数
- // 时间过滤器是M大写可以区分时分秒的分
- // 如果过滤对象的时候 需要空格
- // limitTo 可以截取数组或者字符串 -2 值是负值代表从右边截取
- // 这些指定可以相互串起来用
- </script>
- </body>
- </html>
Angular——内置过滤器的更多相关文章
- angular内置过滤器-filter
这篇文章来讲解一下angular内置的filter过滤器. 没错,这个过滤器的名字,就叫'filter',虽然自定义过滤器也是使用module.filter()...但是不要混淆了,这个filter就 ...
- angularjs 构建主页 内置过滤器、日期的格式化
从构建负责管理主屏幕的 MainController 开始.在这个 MainController 控制器内,只需设置一个每秒运转一次,同时更新一个局部作用域变量的延时 angular.module(' ...
- apache shiro内置过滤器 标签 注解
内置过滤器 anon(匿名) org.apache.shiro.web.filter.authc.AnonymousFilter authc(身份验证) org.apache.shiro ...
- AngularJS复习-----内置过滤器和内置服务
AngularJS中的内置服务(共30多个): $http 发送http请求,主要用于进行异步数据请求的功能实现,这个服务主要封装了XMLHttpRequest对象和JSONP数据访问模式来完成远程请 ...
- Asp.Net Core MVC框架内置过滤器
第一部分.MVC框架内置过滤器 下图展示了Asp.Net Core MVC框架默认实现的过滤器的执行顺序: Authorization Filters:身份验证过滤器,处在整个过滤器通道的最顶层.对应 ...
- Django内置过滤器详解附代码附效果图--附全部内置过滤器帮助文档
前言 基本环境 Django版本:1.11.8 Python版本:3.6 OS: win10 x64 本文摘要 提供了常用的Django内置过滤器的详细介绍,包括过滤器的功能.语法.代码和效果示例. ...
- angular内置指令相关知识
原文地址 https://www.jianshu.com/p/5a5b43a8e91f 大纲 1.angular指令的分类 2.angular指令之——组件 3.angular指令之——属性指令 (n ...
- Shiro内置过滤器
Shiro内置过滤器 DefaultFilter 枚举类定义了shiro所有的默认过滤器. package org.apache.shiro.web.filter.mgt; public enum D ...
- AngularJS提供的内置过滤器
1. currencycurrecy过滤器可以将一个数值格式化为货币格式.用{{ 123 | currency }}来将123转化成货币格式.currecy过滤器允许我们自己设置货币符号.默认情况下会 ...
随机推荐
- 子元素设置margin-top,父元素也受影响
这个问题困惑了非常久.尽管没有大碍早就摸出来怎么搞定它.但始终不明确原因出在哪里,假设仅仅是IE有问题我也不会太在意.可问题是全部上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事, ...
- Installation error: INSTALL_FAILED_VERSION_DOWNGRADE Android
我们在安装新的 APk 的时候.会出现 Installation error: INSTALL_FAILED_VERSION_DOWNGRADE 原因: 是由于 androidversionCode ...
- 【转】winform 程序实现一次只能打开一个该程序
ref: http://www.jb51.net/article/17747.htm //在程序的main函数中加入以下代码 bool createdNew; System.Threading.Mut ...
- webpack—入门
点击进入webpack官网.,开始教程时,建议先学习ES6语法,也请先观看本篇Windows符号介绍文章,当所有webpack内容学习完后,会有一个专门的介绍 webpack四个核心概念(从官网入门— ...
- 【POJ 3122】 Pie (二分+贪心)
id=3122">[POJ 3122] Pie 分f个派给n+1(n个朋友和自己)个人 要求每一个人分相同面积 但不能分到超过一个派 即最多把一整个派给某个人 问能平均分的最大面积 二 ...
- Android架构的简单探讨(一)
在CSDN上看到这样一篇译文,虽然最终的解决方案要按照自己特定的项目去设计,但该文还是引起了很多自己的共鸣,原文猛戳这里. 这是他提出的基于Messaging的MVC框架: 其中包含的设计思想在于:哪 ...
- 容器ConcurrentHashMap原理(学习)
一.概述 HashMap 是非线程安全的,在不考虑性能问题的时候,我们的解决方案有 Hashtable 或者Collections.synchronizedMap(hashMap),这两种方式基本都是 ...
- 【UVa 10881】Piotr's Ants
Piotr's Ants Porsition:Uva 10881 白书P9 中文改编题:[T^T][FJUT]第二届新生赛真S题地震了 "One thing is for certain: ...
- [翻译]NUnit--前言(一)
前言: 翻译这个系列主要是自己在学习NUnit之时看英文文档大部分能看懂但是有些还是功底不足,所以在方便自己以后再学习的时候可以快速查找,也能够加深印象以及掌握的更好.同时在搜索网上关于NUnit系列 ...
- ODB(C++ ORM)用Mingw的完整编译过程
用mingw官方的GCC4.7.2编译libodb后,并用odb compiler对hello示例生成odb的"包裹"代码,编译链接总是不能通过,下面是编译example/hell ...