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
– Mridul Kashyap, Commented Jul 26, 2016 at 5:30
check this answer on stackoverflow i believe it'll be useful. — Mridul Kashyap
– Mridul Kashyap, Commented Jul 26, 2016 at 5: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
– Zichen Ma, Commented Jul 26, 2016 at 5:38

Silvinus · Accepted Answer · 2016-07-26 05:53:15Z

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, 2016 at 5:53

answered Jul 26, 2016 at 5:43

Silvinus

1,4459 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zichen Ma Over a year ago

Thank you Silvinus, that's what I want!

rejo · Accepted Answer · 2016-07-26 05:44:04Z

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 <p>{{greeting | tokenize:false:delimiter}}</p> , what is the false mean?

Mridul Kashyap · Accepted Answer · 2016-07-26 05:46:23Z

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>

Collectives™ on Stack Overflow

AngularJS filter does not sync the input value from module

3 Answers 3

1 Comment

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Linked

Related