第219天:Angular---过滤器
在Angular中,过滤器的功能主要是格式化数据表达式,且可以自定义过滤器。作用域(scope)主要服务于页面模板,在控制器和页面中起桥梁作用,保存模板中的数据对象,为模板中的元素提供方法和属性。
一、过滤器的表现形式
在angular中有三种变现形式,通过管道字符 “ | ”,与需要处理的代码进行连接,看代码:
1、单个过滤器,如:{{表达式 | 过滤器名}}
货币过滤器 {{8.88 | currency}} // $8.88
2、多个过滤器,如:{{表达式 | 过滤器名1 | 过滤器名2 | ...}}
{{8.88 | currency | filter | ...}}
3、带参数过滤器,如:{{表达式 | 过滤器名1 : 参数1 : 参数2 : ...}}
{{8.88 | number : 1}}
二、angular中自带的九种过滤器
1、currency格式化数字为货币格式。
{{ 8.88 | currency }}// 默认为$8.88 {{ 8.88 | currency : "¥"}} // ¥8.88
2、lowercase过滤器将字符串格式化为小写
姓名为{{ lastName | lowercase }} // zhang $scope.lastName="ZHANG"
3、uppercase过滤器将字符串格式化为大写
{{ lastName | uppercase }} // ZHANG $scope.lastName="zhang"
4、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'}}
5、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'}}}//输出的话就是{"age":20,"id":10,"name":"iphone"}
6、limitTo 截取
{{"1234567890"|limitTo:6}}// 从前面开始截取6位 {{"1234567890"|limitTo:-4}}// 从后面开始截取4位
7、date 时间格式化
{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss" }}// 2017-03-22 13:52:25
8、number 格式化(保留小数)
{{149016.1945000|number:2}} //149016.19
9、 json (格式化json对象)
json过滤器可以把一个js对象格式化为json字符串,没有参数。这东西有什么用呢,我一般也不会在页面上输出一个json串啊,官网说它 可以用来进行调试,嗯,是个不错的选择。或者,也可以用在js中使用,作用就和我们熟悉的JSON.stringify()一样。用法超级简单:
{{ jsonTest | json}}
三、angular自定义过滤器
方法:
app.filter('name', function() { return function(input, char) { return 自定义你的过滤器 } }
app.filter('capitalize', function() { //input 需要过滤的元素 //char位置,索引减一 return function(input, char) { if(isNaN(input)) { //如果序号位置没有设置,索引位置默认是0 var char = char - 1 || 0; //把过滤元素索引位置上的字母转换成大写 var letter = input.charAt(char).toUpperCase(); var out = []; for(var i = 0; i < input.length; i++) { if(i == char) { out.push(letter); } else { out.push(input[i]); } } return out.join(''); } else { return input; } } });
第219天:Angular---过滤器的更多相关文章
- Angular过滤器
angular中的过滤器有: currency 过滤货币 number 过滤数字, date 过滤日期 json 把js对象过滤为json字符串 limitTo 截取字符串,参数是正数则从左往右 ...
- Angular过滤器 自定义及使用方法
首先设置自定义过滤器. 定义模块名:angular .module('myApp') .filter('filterName',function(){ return function(要过滤的对象,参 ...
- angular过滤器基本用法
1.过滤器主要用于数据的筛选,可以直接在模板使用 语法: {{expression | filter}} {{expression | filter | filter2}} {{expression ...
- Angular 过滤器的简单使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- angular过滤器使用 自定义过滤器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...
- 如何angular过滤器进行排序???
首先定义一个json文件: 然后写HTML文件: <div id="box"> <!--第一个下拉框--> <select ng-model=&quo ...
- angular 过滤器(日期转换,时间转换,数据转换等)
(function() { 'use strict'; /** * myApp Module * * Description */ angular.module('myApp') .filter('i ...
- Angular 过滤器
<!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...
- 简话Angular 04 Angular过滤器详解
一句话: filter是万能的数据处理器,可以过滤数据,排序数据,删除数据,扩展数据 1. 内置filter大全 url: https://docs.angularjs.org/api/ng/filt ...
- angular过滤器在html和js中的使用
在HTML中使用格式为:{{数据 | 过滤器名称:条件一:条件二--}}:过滤条件间使用:隔开 例如: 在代码中一般格式为: 变量 = $filter("过滤器名称")(被过滤数 ...
随机推荐
- JAVAMAIL 530 Error: A secure connection is requiered(such as ssl)
原因:代码没有开启ssl传输 添加: props.put("mail.smtp.ssl.enable", "true"); // 设置是否 ...
- systemctl start nginx timeout
昨儿个研究docker ,搭建私有仓库.想着用nginx代理一下仓库地址.方式使用80端口,于是愉快的下载,编辑,安装nginx.创建nginx.service作为系统启动服务. 结果......,多 ...
- ubuntu lvm模式进行扩容
ubuntu的16.04 18.04有lvm的功能(安装的时候的选项),能在磁盘空间用完的时候,无缝增加一个磁盘进去.因为linux系统只有一个盘,所以是非常方便,不会有windows加1个磁盘要进行 ...
- PHPCMS增加SEO字段调用
alter table v9_site add site_title_index varchar(255) not null;alter table v9_site add keywords_ind ...
- shell编程基础(转载)
Shell编程基础 原作者 Leal:请参阅页面底部的编者列表. 授权许可: 创作共享署名协议 GNU 自由文档许可证 注意:本文仍然在持续的修订之中,且错漏之处可能较多.如果能够阅读英语的话,可以考 ...
- Netty源码分析第4章(pipeline)---->第7节: 前章节内容回顾
Netty源码分析第四章: pipeline 第七节: 前章节内容回顾 我们在第一章和第三章中, 遗留了很多有关事件传输的相关逻辑, 这里带大家一一回顾 首先看两个问题: 1.在客户端接入的时候, N ...
- python实现atm机基本操作及购物车
一.需求分析 ATM机要为用户提供转账,提现,还款,付款,消费流水,操作记录等操作接口 ATM机要为管理员提供创建用户,冻结解冻,修改额度的功能 ATM机管理员认证使用装饰器来实现 购物车要提供管理员 ...
- 新手Python第四天(生成器)
Python 生成器 生成器和生成表达式 a=[i*2 for i in range(10)]#生成表达式 b=(i*2 for i in range(10))#生成器 生成器的特点:优点(不占用内存 ...
- 1、Ansible安装配置
ansible介绍: Ansible是一款基于Python开发的自动化运维工具,主要是实现批量系统配置.批量程序部署.批量运行命令.批量执行任务等等诸多功能.Ansible是一款灵活的开源工具,能够很 ...
- linux命令系列 ls
ls是linux中最常用的命令之一 ls 的功能是list directory contents,其常用的选项如下: (1) -l use a long listing format(长格式,显示 ...