angular-filter自定义过滤器运行顺序

来源:互联网 发布:flexpaper flash.js 编辑:程序博客网 时间:2024/06/18 05:04

过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中。


<!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>
0 0
原创粉丝点击