在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---过滤器的更多相关文章

  1. Angular过滤器

    angular中的过滤器有: currency 过滤货币 number  过滤数字, date  过滤日期 json 把js对象过滤为json字符串 limitTo  截取字符串,参数是正数则从左往右 ...

  2. Angular过滤器 自定义及使用方法

    首先设置自定义过滤器. 定义模块名:angular .module('myApp') .filter('filterName',function(){ return function(要过滤的对象,参 ...

  3. angular过滤器基本用法

    1.过滤器主要用于数据的筛选,可以直接在模板使用 语法: {{expression | filter}} {{expression | filter | filter2}} {{expression ...

  4. Angular 过滤器的简单使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. angular过滤器使用 自定义过滤器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  6. 如何angular过滤器进行排序???

    首先定义一个json文件: 然后写HTML文件: <div id="box"> <!--第一个下拉框--> <select ng-model=&quo ...

  7. angular 过滤器(日期转换,时间转换,数据转换等)

    (function() { 'use strict'; /** * myApp Module * * Description */ angular.module('myApp') .filter('i ...

  8. Angular 过滤器

    <!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...

  9. 简话Angular 04 Angular过滤器详解

    一句话: filter是万能的数据处理器,可以过滤数据,排序数据,删除数据,扩展数据 1. 内置filter大全 url: https://docs.angularjs.org/api/ng/filt ...

  10. angular过滤器在html和js中的使用

    在HTML中使用格式为:{{数据 | 过滤器名称:条件一:条件二--}}:过滤条件间使用:隔开 例如: 在代码中一般格式为:  变量 = $filter("过滤器名称")(被过滤数 ...

随机推荐

  1. Object C学习笔记6-如何在Windows环境搭建Object C开发环境

    1. 安装编译环境 Object C和其他很多语言一样,都需要有一个编译器.Object C 是在GCC下编译的.GCC(GNU Compiler Collection,GNU编译器集合),是一套由 ...

  2. 【RAC搭建报错】You need disks from at least two different failure groups, excluding quorum disks and quorum failure groups, to create a Disk Group with normal redundancy

    报错: You need disks from at least two different failure groups, excluding quorum disks and quorum fai ...

  3. Java多线程多个线程wait(),一个notify()唤醒,唤醒的顺序

    package thread; public class ThreadWN implements Runnable { public String name; public String getNam ...

  4. hdu1754 I Hate It(线段树单点更新,区间查询)

    传送门 有更新单个学生成绩和查询某个区间内学生成绩最大值两种操作 线段树代码 #include<bits/stdc++.h> using namespace std; +; using n ...

  5. JMeter各个基础组件简介

    刚从LoadRunner转到JMeter,对JMeter的各种概念比较懵.在这里记录下.欢迎大家关注我的个人微信号:测试杂货铺. JMeter的各个功能都是它的组件来完成或实现的,下面来对JMeter ...

  6. opengl矩阵向量

    如何创建一个物体.着色.加入纹理,给它们一些细节的表现,但因为它们都还是静态的物体,仍是不够有趣.我们可以尝试着在每一帧改变物体的顶点并且重配置缓冲区从而使它们移动,但这太繁琐了,而且会消耗很多的处理 ...

  7. MYSQL数据库与Emoji表情的故事

    问题背景 手机上众多输入法和键盘支持输入 emoji 表情,给早期设计的程序造成了越来越多的干扰. 移动端购物的流行,2018 年 "双十一"全网移动端交易达到 93.6% 微信年 ...

  8. 第七章 用户输入和while循环

    7.1函数input()的工作原理 函数默认输入为字符串string,如果需使用数字,需用int进行类型转换 7.2 while循环 while是根据条件的真假判断是否进入执行 使用标志: 使用bre ...

  9. hostname命令详解

    基础命令学习目录首页 原文链接:https://idc.wanyunshuju.com/cym/68.html Linux操作系统的hostname是一个kernel变量,可以通过hostname命令 ...

  10. [linux] 查看网卡UUID

    virtualbox复制了虚拟机,重新初始化网卡后,需要对/etc/sysconfig/network-scripts/ifcfg-eth0更新UUID值,虽然不改暂时也没发现有问题. 网上查找需要n ...