AngularJS Filter过滤器

最新推荐文章于 2021-03-27 13:57:27 发布

雾里看花叹朦胧

最新推荐文章于 2021-03-27 13:57:27 发布

阅读量264

点赞数

分类专栏： angularjs 文章标签： angularjs

本文链接：https://blog.youkuaiyun.com/hsl0530hsl/article/details/77916940

版权

angularjs 专栏收录该内容

8 篇文章

订阅专栏

本文通过实例展示了AngularJS中各种内置过滤器的应用，包括字符串大小写转换、数字格式化、日期显示、数组排序等，并介绍了如何创建自定义过滤器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS 过滤器</title>

    <script src="../js/jquery-2.1.3.min.js"></script>
    <script src="../js/angular.min.js"></script>
</head>
<body>

    <!--过滤器可以使用一个管道字符（|）添加到表达式和指令中，多个 filter 使用多个(|)，一个 filter 多个参数使用多个(:)-->
    <!--
        currency: 格式化数字为货币格式。
        filter: 从数组项中选择一个子集。
        lowercase: 格式化字符串为小写。
        orderBy: 根据某个表达式排列数组。默认升序asc,倒序添加-负号
        uppercase: 格式化字符串为大写。
        data: 格式化
        number: 格式化（保留小数）
        limitTo: 截取(位数)
    -->
    <div ng-app="myApp" ng-controller="myCtrl" ng-init="name='Tom';price=555">
        <p>lowercase: {{name | lowercase}}</p>
        <p>uppercase: {{name | uppercase}}</p>
        <p>currency: {{price | currency}}</p>
        <p>currency: {{price | currency: "RMB ￥ "}}</p>
        <p>currency: {{price | currency: "我的转换 "}}</p>
        <p>date: {{1890165945000 | date:"yyyy-MM-dd HH:mm:ss"}}</p>
        <p>number: {{5103168410.168131541 | number: 3}}</p>
        <p>limitTo: {{168412.16841651 | limitTo: 5}}</p>
        <p>limitTo: {{"this is just a test" | limitTo: 6}}</p>
        <p>limitTo: {{"测试中文" | limitTo: 3}}</p>
        根据id降序排:
        {{ [{"age": 20,"id": 10,"name": "iphone"},
        {"age": 12,"id": 11,"name": "sunm xing"},
        {"age": 44,"id": 12,"name": "test abc"}
        ] | orderBy:'id':true }}

        <br/>
        根据-id升序排:
        {{ [{"age": 20,"id": 10,"name": "iphone"},
        {"age": 12,"id": 11,"name": "sunm xing"},
        {"age": 44,"id": 12,"name": "test abc"}
        ] | orderBy:'-id' }}

        <br/>
        根据id升序排:
        {{ [{"age": 20,"id": 10,"name": "iphone"},
        {"age": 12,"id": 11,"name": "sunm xing"},
        {"age": 44,"id": 12,"name": "test abc"}
        ] | orderBy:'id' }}

        <hr>
        自定义 filter:
        <p>{{speak | reverse}}</p>
        <p> {{name | contactParam: speak : " and thanks."}}</p>

    </div>
    <script>
        angular.module("myApp", []).controller("myCtrl", function ($scope) {
            $scope.speak = "How are you!";
        }).filter("reverse", function () {
            return function (val) {
                return val.split("").reverse().join("");
            }
        }).filter("contactParam", function () {//自定义过滤器 -- 多参数
            return function (val) {
                return "start:" + Array.prototype.slice.call(arguments).join(",");
            }
        });
    </script>

</body>
</html>