AngularJS过滤器

最新推荐文章于 2024-10-24 18:18:55 发布

chongxiaocheng

最新推荐文章于 2024-10-24 18:18:55 发布

阅读量330

点赞数 1

CC 4.0 BY-SA版权

分类专栏：框架文章标签： angularjs filter 框架 web前端

本文链接：https://blog.youkuaiyun.com/chongxiaocheng/article/details/70862219

框架专栏收录该内容

8 篇文章

订阅专栏

直接上干货

AngularJS过滤器统称为filter

有以下几种过滤器

一.currency 货币格式过滤器

用法：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">

<!--货币过滤器输出：<span ng-bind="price | 参数1（必写）:参数2（选写）:
参数3（选写）
"></span>-->

</div>			<!--注释内容-->

<script>
    var app = angular.module("myApp", []);

    app.controller("myCtrl", ["$scope", function($scope) {
        $scope.price = 499.1213;
        
    }]);
</script>
</body>
</html>

1.如上在绑定标签上加“| currency”参数1为默认样式页面显示会$499

2.如上在绑定标签上加“| currency:'￥' ”参数2为货币样式页面显示会￥499

3.如上在绑定标签上加“| currency:'￥' :3 ”参数3为精确到小数点后几位页面显示会￥499.121

二.date 日期时间过滤器

用法：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
   货币过滤器输出：<span ng-bind="date | date:'yyyy年MM月dd日 hh:mm:ss'"></span>
</div>
<script>
    var app = angular.module("myApp", []);

    app.controller("myCtrl", ["$scope", function($scope) {
        $scope.date = new Date();
        
    }]);
</script>
</body>
</html>

日期格式化：通常情况下，需要按照用户的要求进行输出，这时候就会附带参数
y/M/d/h/m/s/E 年/月/日/时/分/秒/星期

三.filter 输出过滤器（重要）

用法：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
   关键词：<input type="text" ng-model="keyword">
        <ul>
            <li ng-repeat="u in users | filter:keyword">
                <span ng-bind="u.userID"></span>
                <span ng-bind="u.username"></span>
                <span ng-bind="u.nickname"></span>
            </li>
        </ul>
</div>
<script>
    var app = angular.module("myApp", []);

    app.controller("myCtrl", ["$scope", function($scope) {
       $scope.users = [
            {userID:1, username:"cat", nickname:"tom"},
            {userID:2, username:"xiaofan", nickname:"张小凡"},
            {userID:3, username:"biyao", nickname:"碧瑶"},
            {userID:4, username:"luxueqi", nickname:"陆雪琪"},
            
        ]
        
    }]);
</script>
</body>
</html>

上面的users循环在span标签中输出keyword传递一个字符串，找到所有符合这个字符串的对象

具体用法可以自行练习体会

四.json 把目标对象转化为json对象

用法：

这个过滤器比较鸡肋，一般用的较少，不再赘述

五.limitTo 长度限制过滤器

用法：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
   	    长度：<input type="text" ng-model="length"><br />
        位置：<input type="text" ng-model="index">
        <br />
        <ul>
            <li ng-repeat="u in users | limitTo:length:index">
                <span ng-bind="u.userID"></span>
                <span ng-bind="u.username"></span>
                <span ng-bind="u.nickname"></span>
            </li>
        </ul>
</div>
<script>
    var app = angular.module("myApp", []);

    app.controller("myCtrl", ["$scope", function($scope) {
       $scope.users = [
            {userID:1, username:"cat", nickname:"tom"},
            {userID:2, username:"xiaofan", nickname:"张小凡"},
            {userID:3, username:"biyao", nickname:"碧瑶"},
            {userID:4, username:"luxueqi", nickname:"陆雪琪"},
            
        ]
        
    }]);
</script>
</body>
</html>

参数1length限定循环长度，上例中通过input输入循环的长度

参数2index规定循环起始位置

六.lowercase 小写转换

用法：

<div ng-bind="name | lowercase"></div>

将目标字符串英文内容转化成全小写样式

七.uppercase大写转换

用法：

<div ng-bind="name | uppercase"></div>

将目标字符串英文内容转化成全大写样式

八.number 格式为文本

用法：

过滤输入内容是否为数字类型，如果是则返回数字，不是则不输出

九.orderBy 过滤器集合

用法：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
   	    关键词：<input type="text" ng-model="keyword"><br />
        倒序：<input type="checkbox" ng-model="sort">
        <br />
        <ul>
            <li ng-repeat="u in users | orderBy:keyword:sort">
                <span ng-bind="u.userID"></span>
                <span ng-bind="u.username"></span>
                <span ng-bind="u.nickname"></span>
            </li>
        </ul>
</div>
<script>
    var app = angular.module("myApp", []);

    app.controller("myCtrl", ["$scope", function($scope) {
       $scope.users = [
            {userID:1, username:"cat", nickname:"tom"},
            {userID:2, username:"xiaofan", nickname:"张小凡"},
            {userID:3, username:"biyao", nickname:"碧瑶"},
            {userID:4, username:"luxueqi", nickname:"陆雪琪"},
            
        ]
        
    }]);
</script>
</body>
</html>

标签上通过orderBy绑定过滤集合关键词，倒序两种过滤方式