AngularJS filter does not sync the input value from module

Question

Hello I am new to AngularJS and met a question. I need to create a customized filter to filter a string, however the filter cannot sync the input result. Because the filter.js has to be made into a separated JS file, I thought I have to import $scope.delimiter from controller.js to filter.js, but I don't know how to do it. Thank you very much in advanced. 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;
            }
        };
    });

let me get it straight. you're removing all instances of spaces where there's one or more spaces in the string, and then splitting them where there is no space? — Mridul Kashyap, Jul 26 '16 at 05:30
check this [answer on stackoverflow](http://stackoverflow.com/questions/26650656/angularjs-access-scope-from-controller-in-custom-filter) i believe it'll be useful. — Mridul Kashyap, Jul 26 '16 at 05:35
Actually, I need to separate a string in Input field with a delimiter in delimiter field. for example, in default, Input field is : "Angular is awesome", if the delimiter is "#“ I need to turn it to： ”A#n#g#u#l#a#r#i#s#a#w#e#s#o#m#e“ — Zichen Ma, Jul 26 '16 at 05:38

Silvinus · Accepted Answer · 2016-07-26T05:53:15.207

0

See this plunker : https://plnkr.co/edit/kXQGTj1sABKOuxObOhn7?p=preview.

Default isn't needed, just check if delimiter is present

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

And the use

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

edited Jul 26 '16 at 05:53

answered Jul 26 '16 at 05:43

Silvinus

1,445
8
16

Thank you Silvinus, that's what I want! – Zichen Ma Jul 26 '16 at 06:19

score 0 · Answer 2 · answered Jul 26 '16 at 05:44

Try this , its working 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;
        }
    };
});

Thank you Rejs, that's exactly what I needed. Can I ask: in
{{greeting | tokenize:false:delimiter}}
, what is the false mean? — Zichen Ma, Jul 26 '16 at 06:21

score 0 · Answer 3 · answered Jul 26 '16 at 05:46

check this plunkr i think this is what you need, right?

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 filter does not sync the input value from module

3 Answers3