AngularJS-Filter的用法（一）

最新推荐文章于 2023-02-08 18:13:21 发布

Paul_Huang_2011

最新推荐文章于 2023-02-08 18:13:21 发布

阅读量1.2k

点赞数

分类专栏： Web前端文章标签： angularjs

本文链接：https://blog.csdn.net/hbr2014/article/details/45651245

版权

Web前端专栏收录该内容

20 篇文章 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

显示当前Locale的货币符号

$123.00

中国货币符号

￥123.00

时间方面的：

{{ 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' }}

Paul_Huang_2011

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS-Filter的用法（一）

AngularJS中，Filter实际完成的是变换的功能。Filter的用法如下：1. 通过“|”来使用Filter比如，下例中使用了uppercase的filter，会把name自动转换成大写字母，hbr会变成HBR也可以用lowercase全部转换成小写字母,HBR会变成hbr Simple app <script src="bo
复制链接

扫一扫