AngularJS-Filter的用法（一）

待我称王封你为后i 2022-08-08 06:47 171阅读 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 条评论，171人围观）

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

相关阅读

相关 SpringBoot - MyBatis-Plus - 基本用法(一)

写在前面 MyBatis-Plus内置了通用的Mapper，我们只需要继承BaseMapper，然后通过少量配置即可实现单表基本的CRUD操作。基本用法 ①.

灰太狼/ 2023年10月08日 15:37/ 0 赞/ 17 阅读

相关 Shiro基本用法一

1.什么是Shiro? Shiro是一个Java的安全（权限）框架。 Shiro可以完成，认证，授权，加密，会话管理，Web集成，缓存等。 •官网: http:/

ゞ浴缸里的玫瑰/ 2023年09月29日 19:23/ 0 赞/ 25 阅读

相关 React Hook的用法: State + Effect(一)

React Hook 简述 React Hook 是React 16.8 这个版本新增的一个特性。在此之前我们编写React组件一般大多数都是用 class组件，而

心已赠人/ 2023年07月14日 10:41/ 0 赞/ 9 阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关 IntelliJ IDEA Debug调试用法一

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

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

相关 C++ vector& nums 用法一

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

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

相关 MySQL基本用法(一)

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

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