如何在angularjs的自定义指令内部定义自定义过滤器？

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

Drenched-oldTimes

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

阅读量847

点赞数

分类专栏： angular 文章标签： AngularJS 自定义过滤器利用AngularJS怎么定义自定义过滤怎么用自定义过滤器实现首字母大小写

本文链接：https://blog.csdn.net/sinat_38529191/article/details/70879888

版权

angular 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

今天下班碰到之前的小学妹，看她今天很是烦躁，我们就沟通了一下，原来是上学的时候没有学好AngularJS，有很多不懂的问题，她问了我一个问题，就是怎么使用自定义过滤器？一听到这个问题，我就有得说了，我就给她写了个案例，基本的使用方法。

其实自定义的过滤器很强大，功能很多，所以我们公司一直有在使用，所以我们团队的人都应该会对它挺了解的，今天就来说说怎么去用它。

1、首先你要很清楚地知道该用什么去定义一个自定义过滤器？

app.filter(name, fn):用于定义一个自定义过滤器

其中 name:过滤器名称 fn:过滤器处理函数

2 咱们就用一个案列来分析一下

<!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("myfilter", function() {
        /*
         * 过滤器中，直接return function(value) {}
         * 通过闭包函数来实现数据处理，固定语法结构！
         * value参数：第一个参数，用于接收要处理的数据：数据就是过滤器管道符前面变量中的数据
         */
        return function(value) {/*闭包函数中的value就是过滤器接收到的数据|就是准备过滤的数据*/
            /*
             * 这一部分主要是用来进行数据处理的
             */
            value = value.toUpperCase();
            /* 过滤器中数据处理完成，一定要返回输出*/
            return value;
        }
    });
    app.controller("myCtrl", function($scope) {
        $scope.name = "jerry";
    });
</script>

中间注释部分都有解释，应该就会一目了然，要记得最后一定要返回输出

比较常见的就是运用自定义过滤器还原首字母大小写，还有数组去重之类的，如果大家有需要，可以看看~

祝大家开心度过每一天~