Angular自定义过滤器

最新推荐文章于 2021-10-20 08:44:18 发布

原创最新推荐文章于 2021-10-20 08:44:18 发布 · 516 阅读

0 ·

CC 4.0 BY-SA版权

AngularJS 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在AngularJS中创建自定义过滤器以满足特定需求。通过实例演示了自定义过滤器的定义方法及使用过程，展示了如何将字符串转换为大写。

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

Angular自定义过滤器

由于AngularJS中只定义了九中内置过滤器，所以有的指令做不到某些需求，这时候我们需要自己定义过滤器来满足自己定义的功能。

其语法格式如下：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
    <div ng-bind="name"></div>
    <div ng-bind="name | myfilter"></div>
</div>
<script>
    var app = angular.module("myApp", []);
    /*app.filter(name, fn):用于定义一个自定义过滤器
     * name:过滤器名称
     * fn:过滤器处理函数
     * */
    app.filter("myfilter", function() {
        /*
         * 过滤器中，直接return function(value) {}
         * 通过闭包函数来实现数据处理，固定语法结构！
         * value参数：第一个参数，用于接收要处理的数据：数据就是过滤器管道符前面变量中的数据
         */
        return function(value) {/*闭包函数中的value就是过滤器接收到的数据|就是准备过滤的数据*/
            /*
             * 这一部分主要是用来进行数据处理的
             */
            value = value.toUpperCase();
            /* 过滤器中数据处理完成，一定要返回输出*/
            return value;
        }
    });
    app.controller("myCtrl", function($scope) {
        $scope.name = "jerry";
    });
</script>
</body>
</html>

运行结果如下：

jerry

JERRY