Question

您好我是AngularJS的新手并遇到了一个问题。我需要创建一个自定义过滤器来过滤字符串，但过滤器无法同步输入结果。因为必须将filter.js制作成一个单独的JS文件，我想我必须从controller.js导入$ scope.delimiter到filter.js，但我不知道该怎么做它。非常感谢您的进步。 HTML：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Tokenizer Filter</title>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src="controller.js"></script>
    <script src="filter.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="TokenizeControler">
        <p>Input: <input ng-model="greeting" /></p>
        <p>Delimiter: <input id="delimiter"  ng-model="delimiter" /></p>
        <p>{{delimiter}}</p>
        <p>{{greeting | tokenize: defualt}}</p>
        <p>{{greeting | tokenize}}</p>
    </div>
</body>
</html>

Controller.js：

var myApp = angular
    .module("myApp", [])
    .controller("TokenizeControler",
        function ($scope) {
            $scope.greeting = "Angular is awesome";
            $scope.delimiter = "#";
            $scope.defualt = true;

    });

filter.js：

myApp.filter("tokenize", function () {
    return function (content, defualt) {
            if (angular.isString(content)) {
                var noSpace, output;
                noSpace = content.replace(/ +/g, "");
                if (defualt) {
                    return output = noSpace.split('').join(',') + " (Default)";
                } else {
                    delimiter =  document.getElementById('delimiter').value;

                    return output = noSpace.split('').join(delimiter) + "(With option)";
                    }
            } else {
                return content;
            }
        };
    });

Answer 1

请参阅此plunker：https://plnkr.co/edit/kXQGTj1sABKOuxObOhn7?p=preview。

不需要默认值，只需检查是否存在分隔符

filter("tokenize", function () {
return function (content, delimiter) {
        if (angular.isString(content)) {
            return content
                      .replace(/ +/g, "")
                      .split('')
                      .join(delimiter || ',');
        } else {
            return content;
        }
    };
})

使用

<p>{{delimiter}}</p>
<p>{{greeting | tokenize}}</p>
<p>{{greeting | tokenize:delimiter}}</p>

Answer 2

试试这个，它的工作http://plnkr.co/edit/VFOEADpoWRq0E43GTXpn?p=preview

HTML

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Tokenizer Filter</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src="controller.js"></script>
    <script src="filter.js"></script>
</head>

<body ng-app="myApp">
    <div ng-controller="TokenizeControler">
        <p>Input: <input ng-model="greeting" /></p>
        <p>Delimiter: <input id="delimiter" ng-model="delimiter" /></p>
        <p>{{delimiter}}</p>
        <p>{{greeting | tokenize: defualt}}</p>
        <p>{{greeting | tokenize:false:delimiter}}</p>
    </div>
</body>

</html>

controller.js

var myApp = angular
    .module("myApp", [])
    .controller("TokenizeControler",
        function($scope) {
            $scope.greeting = "Angular is awesome";
            $scope.delimiter = "#";
            $scope.defualt = true;
        });

filter.js

myApp.filter("tokenize", function() {
    return function(content, defualt, delim) {
        if (angular.isString(content)) {
            var noSpace, output;
            noSpace = content.replace(/ +/g, "");
            if (defualt) {
                return output = noSpace.split('').join(',') + " (Default)";
            } else {
                delimiter = delim; //document.getElementById('delimiter').value;
                return output = noSpace.split('').join(delimiter) + "(With option)";
            }
        } else {
            return content;
        }
    };
});

Answer 3

检查这个plunkr我认为这就是你需要的，对吗？

myApp.filter("tokenize", function () {
    return function (content, delimiter) {
            if (angular.isString(content)) {
                var noSpace, output;
                noSpace = content.replace(/ +/g, "");
                if (delimiter) {
                    return output = noSpace.split('').join(delimiter) + " (Default)";
                } else {
                    delimiter =  "#";

                    return output = noSpace.split('').join(delimiter) + "(With option)";
                    }
            } else {
                return content;
            }
        };
    });

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Tokenizer Filter</title>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src="controller.js"></script>
    <script src="filter.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="TokenizeControler">
        <p>Input: <input ng-model="greeting" /></p>
        <p>Delimiter: <input id="delimiter"  ng-model="delimiter" /></p>
        <p>{{delimiter}}</p>
        <p>{{greeting | tokenize}}</p>
        <p>{{greeting | tokenize: delimiter}}</p>
    </div>
</body>
</html>

AngularJS过滤器不会同步模块的输入值

3 个答案: