AngularJS-Filter的用法（一）

待我称王封你为后i 2022-08-08 06:47 160阅读 0赞

AngularJS中，Filter实际完成的是变换的功能。

### Filter的用法如下： ###

1. 通过“|”来使用Filter

比如，下例中使用了uppercase的filter，会把name自动转换成大写字母，hbr会变成HBR

也可以用lowercase全部转换成小写字母,HBR会变成hbr

<!DOCTYPE html>
    <html  >
    <head>
        <title>Simple app</title>
        <script
                src="bower_components/angular/angular.js">
        </script>
    
    </head>
    <body>
    <div ng-app="">
        <input ng-model="name" type="text" placeholder="Your name">
        <h1>Hello {
       { name |uppercase}}</h1>
    </div>
    
    </body>
    </html>

2. 通过Controller来定义使用，如：

var myApp=angular.module("myApp",[]);
    
    myApp.controller('FilterController', ['$scope', '$filter',
        function($scope, $filter) {
            $scope.lowercasename = $filter('lowercase')("HBR");
        }]);

### Filter的使用举例 ###

显示: 123.46

\{ \{ 123.456789 | number:2 \}\}

显示当前Locale的货币符号

**$123.00**

\{ \{ 123|currency\}\}

中国货币符号

**￥123.00**

\{ \{ 123|currency:'￥'\}\}

时间方面的：

\{ \{ today | date:'medium' \}\}

\{ \{ today | date:'short' \}\}

\{ \{ today | date:'fullDate' \}\}

\{ \{ today | date:'longDate' \}\}

\{ \{ today | date:'mediumDate' \}\}

\{ \{ today | date:'shortDate' \}\}

\{ \{ today | date:'mediumTime' \}\}

\{ \{ today | date:'shortTime' \}\}

年份方面的：

\{ \{ today | date:'yyyy' \}\}

\{ \{ today | date:'yy' \}\}

\{ \{ today | date:'y' \}\}

月份：

\{ \{ today | date:'MMMM' \}\}

\{ \{ today | date:'MMM' \}\}

\{ \{ today | date:'MM' \}\}

\{ \{ today | date:'M' \}\}

小时：

\{ \{ today | date:'dd' \}\}

\{ \{ today | date:'d' \}\}

\{ \{ today | date:'EEEE' \}\}

\{ \{ today | date:'EEE' \}\}

分钟：

\{ \{ today | date:'mm' \}\}

\{ \{ today | date:'m' \}\}

秒：

\{ \{ today | date:'ss' \}\}

\{ \{ today | date:'s' \}\}

毫秒级： \{ \{ today | date:'.sss' \}\}

上下午(AM/PM）

\{ \{ today | date:'a' \}\}

带时区： \{ \{ today | date:'Z' \}\}

自定义：

\{ \{ today | date:'MMM d, y' \}\}

\{ \{ today | date:'EEEE, d, M' \}\}

\{ \{ today | date:'hh:mm:ss.sss' \}\}

发表评论取消回复

表情：

评论列表（有 0 条评论，160人围观）

还没有评论，来说两句吧...

相关阅读

相关 join的用法(java中join的用法)

join的用法-join和joinin在用法上有什么区别 join 作“参加，加入”讲时，一般指参加某一组织、团体或某群人。如： join the Party/ arm

谁借莪１个温暖的怀抱￠/ 2023年09月26日 14:57/ 0 赞/ 50 阅读

相关 join的常用用法(JOIN的用法)

join的用法-join和joinin在用法上有什么区别 join 作“参加，加入”讲时，一般指参加某一组织、团体或某群人。如： join the Party/ arm

àì夳堔傛蜴生んèń/ 2023年09月26日 14:57/ 0 赞/ 44 阅读

相关 composer 的设计原理及其基本用法一

相信有在用PHP的朋友近年来常听到composer这个套件管理工具。它到底是做什么用的？又是为了解决什么问题而存在呢？要了解这个，得先从历史开始说起…。 PHP最早加载

曾经终败给现在/ 2023年01月17日 13:57/ 0 赞/ 141 阅读

相关 webpack简单配置及其用法一

本文章只是用于记录学习webpack的一些基础知识 webpack版本是4以上版本一、初识webpack 1、webpack的配置文件名称默认配置文件名称：w

ゝ一世哀愁。/ 2022年12月26日 14:26/ 0 赞/ 125 阅读

相关 C语言const用法详解(一)(转载)

1、什么是const? 常类型是指使用类型修饰符const说明的类型，常类型的变量或对象的值是不能被更新的。（当然，我们可以偷梁换柱进行更新） 2、为什么引入const？

红太狼/ 2022年08月27日 05:45/ 0 赞/ 234 阅读

相关 Spring中jdbcTemplate的用法实例（一）

Spring中jdbcTemplate的用法实例（一）博客分类： spring springspring jdbctemplatejdbc 一、首先配置JdbcTe

小鱼儿/ 2022年07月14日 11:12/ 0 赞/ 160 阅读

相关 c++string类库的一些用法《一》

1.string类对象的插入insert方法， <table style="font-size:12px; color:black"> <tbody> <tr

深藏阁楼爱情的钟/ 2022年06月17日 22:29/ 0 赞/ 187 阅读

相关 IntelliJ IDEA Debug调试用法一

学习IntelliJ IDEA调试功能：学习使用IntelliJ IDEA Debug调试用法工具 junit postman 代码参考git

骑猪看日落/ 2022年06月09日 11:54/ 0 赞/ 148 阅读

相关 C++ vector& nums 用法一

一维vector 创建一维vector： vector<int> nums;//不指定长度 vector<int> nums(n); // 指定长度为n

心已赠人/ 2022年05月27日 11:23/ 0 赞/ 302 阅读

相关 MySQL基本用法(一)

数据库 1. 数据库概述 1.1 数据库概述什么是数据库数据库就是存储数据的仓库，其本质是一个文件系统，数据按照特定的格式将数据存储起来，用户可以对

叁歲伎倆/ 2022年05月26日 01:13/ 0 赞/ 212 阅读