基本介绍

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

  1. angular内置过滤器-filter

    这篇文章来讲解一下angular内置的filter过滤器. 没错,这个过滤器的名字,就叫'filter',虽然自定义过滤器也是使用module.filter()...但是不要混淆了,这个filter就 ...

  2. angularjs 构建主页 内置过滤器、日期的格式化

    从构建负责管理主屏幕的 MainController 开始.在这个 MainController 控制器内,只需设置一个每秒运转一次,同时更新一个局部作用域变量的延时 angular.module(' ...

  3. apache shiro内置过滤器 标签 注解

    内置过滤器 anon(匿名)  org.apache.shiro.web.filter.authc.AnonymousFilter authc(身份验证)       org.apache.shiro ...

  4. AngularJS复习-----内置过滤器和内置服务

    AngularJS中的内置服务(共30多个): $http 发送http请求,主要用于进行异步数据请求的功能实现,这个服务主要封装了XMLHttpRequest对象和JSONP数据访问模式来完成远程请 ...

  5. Asp.Net Core MVC框架内置过滤器

    第一部分.MVC框架内置过滤器 下图展示了Asp.Net Core MVC框架默认实现的过滤器的执行顺序: Authorization Filters:身份验证过滤器,处在整个过滤器通道的最顶层.对应 ...

  6. Django内置过滤器详解附代码附效果图--附全部内置过滤器帮助文档

    前言 基本环境 Django版本:1.11.8 Python版本:3.6 OS: win10 x64 本文摘要 提供了常用的Django内置过滤器的详细介绍,包括过滤器的功能.语法.代码和效果示例. ...

  7. angular内置指令相关知识

    原文地址 https://www.jianshu.com/p/5a5b43a8e91f 大纲 1.angular指令的分类 2.angular指令之——组件 3.angular指令之——属性指令 (n ...

  8. Shiro内置过滤器

    Shiro内置过滤器 DefaultFilter 枚举类定义了shiro所有的默认过滤器. package org.apache.shiro.web.filter.mgt; public enum D ...

  9. AngularJS提供的内置过滤器

    1. currencycurrecy过滤器可以将一个数值格式化为货币格式.用{{ 123 | currency }}来将123转化成货币格式.currecy过滤器允许我们自己设置货币符号.默认情况下会 ...

随机推荐

  1. 【block第四篇】实现

    -------------------------------------------欢迎查看block连载博客[专栏]--------------------------------------[b ...

  2. linux下配置LAMP开发环境，以及经常使用小细节

    本来安装没什么可说到.可是在linux其中easy会出现各种各样到问题. 我安装以后导致各种问题 比方php无法正常解析,数据库无法关闭,Apache无法开启等等........ 所以搞得我比較郁闷, ...

  3. kvm虚拟化网络管理

    Linux Bridge 网桥管理 VM2 的虚拟网卡 vnet1 也连接到了 br0 上. 现在 VM1 和 VM2 之间可以通信,同时 VM1 和 VM2 也都可以与外网通信 # Vlan LAN ...

  4. Windows 7 蓝屏代码大全 &amp; 蓝屏全攻略

    关于Windows 7.Vista等系统的蓝屏.之前软媒在Win7之家和Vista之家都有非常多文章讨论过,可是都是筛选的常见的一些问题,今天这个文章是个大全.希望大家看着别头痛.文章收藏下来以后待查 ...

  5. web 开发之js---巧用iframe实现jsp无刷新上传文件

    首先要说的就是 ajax 是无法实现上传文件的,可以想一下ajax与后台通信都是通过传递字符串,怎么能传递文件呢?其实出于安全考虑js是不能操作文件的,所以就不要再说用ajax来实现文件的上传了,这是 ...

  6. linux文件系统的权限简单介绍

    linux系统下,文件的权限是这样表示的: - --- --- --- 一共用10位的二进制进行表示,其中 位置 0 :  - :文件        d :目录剩下的9个位置:位置1-3 当前用户(应 ...

  7. install Django in mac

    install Eclipse & Python(pydev) in mac install django in mac $ curl -O https://pypi.python.org/p ...

  8. solr入门之solr的拼写检查功能的应用级别尝试

    今天主要是收集了些拼写检查方面的资料和 尝试使用一下拼写检查的功能--=遇到了不少问题 拼写检查的四种配置眼下我仅仅算是成功了半个吧 --------------------------------- ...

  9. Xubuntu 计划从 19.04 版本开始停止提供 32 位安装镜像（XDE/LXQt的 Lubuntu 成为了目前唯一仍然提供 32 位安装镜像的 Ubuntu 桌面发行版）

    Ubuntu 17.10 以及其他许多 *buntu 衍生品都已在今年早些时候停止提供 32 位安装镜像.但其中有一个依然坚持提供适用于 i386 架构的镜像,它就是 Xubuntu,但现在 Xubu ...

  10. ReSharper warns: “Static field in generic type”

    http://stackoverflow.com/questions/9647641/resharper-warns-static-field-in-generic-type It's fine to ...