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过滤器允许我们自己设置货币符号.默认情况下会 ...
随机推荐
- 异 形 卵 709 南阳oj
http://acm.nyist.net/JudgeOnline/problem.php? pid=709 异 形 卵 时间限制:1000 ms | 内存限制:65535 KB 难度: 描写叙述 ...
- AE After Effect 如何分段渲染
如果只要第一段的话,你把要输出的那段首尾处分别按下B键和N键,这样输出时就会只输出这一段了(拖动首尾的栏目修改起始和终止的时间):如果是批量渲染的话你只要在这些不同的合成层里,每个按下ctrl+M键, ...
- cocos2d-x 3.0 CREATE_FUNC解析
#define CREATE_FUNC(__TYPE__) \ static __TYPE__* create() \ { \ __TYPE__ *pRet = new __TYPE__(); \ i ...
- 【C语言】推断一个数是否为2的n次方
//推断一个数是否为2的n次方 #include <stdio.h> int is_two_n(int num) { if ((num&(num - 1))) //去掉一个1,推断 ...
- c#如何设置成：【当前打开的项目是什么，就默认它为启动项目】，不然新添或打开别的项目都要设置一次启动 [原创]VS2012中将当前选定项目做为启动项
主菜单→[工具]→[选项]→[项目和解决方案]→[生成并运行],选中“对于新解决方案,使用当前选定的项目作为启动项目” 应该是右键单击解决方案,点击属性打开,选中“当前选定内容”那一项,就可以把你正在 ...
- Linux bash: scp: command not found的问题记录
,总结 scp成功,须要两个server都安装了scp服务才行.
- 【code】flex_进度条样式
近期打算吧硬盘中的资料记录在博客中,实用的就当是个分享,无用的就当是个备份,还望大家不要见怪. 一共4个文件: JinDuTiaoItem.mxml: <?xml version="1 ...
- nginx-Proxy Cache缓存
1.创建目录 mkdir /export/Data/nginx_proxy_cache mkdir /export/Data/nginx_proxy_temp 2.修改http,打开缓存 文件 ...
- HDU 3308 线段树单点更新+区间查找最长连续子序列
LCIS Time Limit: 6000/2000 MS (Java/Oth ...
- 关于移动平台的viewport
viewport是用来设置移动平台上的网页宽度,写device-width比较好,不然会和设备上不一样 在使用device-width之后,图片资源最好使用百分比布局,进行自动缩放. 文字大小是一样的 ...