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过滤器允许我们自己设置货币符号.默认情况下会 ...
随机推荐
- cocos2dx-3.0(21) 移植android平台 说多了都是泪
----我的生活,我的点点滴滴! ! 网上3.0的教程真心少.能够说没有吧,大多都是2.x 或者 3.0測试版之类的,因为我心大,没有照着2.x去搞,后来搞完后总结了一下,发觉事实上3.0的移植and ...
- Jmeter技巧
Jmeter参数化的4种方法 用Jmeter测试时包含两种情况的参数,一种是在url中,一种是请求中需要发送的参数. URL中的参数,如:http://blog.da-fang.com/index.p ...
- easyui中点击datagrid的分页刷新按钮，数据无法更新到最新状态
原因分析:点击刷新按钮是对当前页数据进行reload,因此所传的请求参数皆为上一次加载当前页的参数即datagrid的load方法中的参数,主要是因为请求的最终时间无法更新到最新状态 解决方案:对点击 ...
- Android实现多个倒计时优化与源代码分析
由于之前有个项目需求是须要时时刻去更新UI倒计时,之前想到的,这简单嘛,用计时或者Handler就能够搞定,并且性能也不错,可是需求要ListView,什么,?大量的View都须要,那Handle处理 ...
- jboss相关的术语
1 jboss eap java ee application server.red hat官方版本. 2 jboss as/wildfly java ee application server的社区 ...
- EL 隐含对象
EL 隐含对象(11个):
- 2015-2016 ACM-ICPC Pacific Northwest Regional Contest (Div. 2)V - Gears
Problem V | limit 4 secondsGearsA set of gears is installed on the plane. You are given the center c ...
- CentOS 6.5下安装MySQL 5.6.21
Linux中使用最广泛的数据库就是MySQL,使用在线yum的方式安装的版本落后MySQL网站好几个小版本,本节亲自测试安装新版的MySQL. 测试机器环境: VMware Workstation 1 ...
- python-----写入txt用法
代码如下: #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2019/1/14 11:23 # @Author : zxb file_p ...
- 使用Java实现图像分割
为减少动画制作过程中的IO操作,我们可以使用连续动画来改善动画播放效率.如果我们对图像中的每张小图像单独分割成独立的文件,那么当每次要使用这些小图像的时候,我们都得从文件中读取图像信息. 实际上我们可 ...