AngularJS Filter synchronisiert nicht den Eingangswert von Modul

Hallo Ich bin neu in AngularJS und traf eine Frage. Ich muss einen benutzerdefinierten Filter erstellen, um eine Zeichenfolge zu filtern, der Filter kann jedoch das Eingabeergebnis nicht synchronisieren. Da die filter.js in eine getrennte JS-Datei gemacht werden muss, dachte ich, ich muss $ scope.delimiter von controller.js nach filter.js importieren, aber ich weiß nicht, wie es geht. Vielen Dank im Voraus. HTML:AngularJS Filter synchronisiert nicht den Eingangswert von Modul

<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; 
      } 
     }; 
    });

Quelle

2016-07-26 Zichen Ma

lassen Sie mich klarstellen. Sie entfernen alle Instanzen von Leerzeichen, in denen sich ein oder mehrere Leerzeichen befinden, und teilen sie dann auf, wenn kein Leerzeichen mehr vorhanden ist? –

check this [antwort auf stackoverflow] (http://stackoverflow.com/questions/26650656/angularjs-access-scope-from-controller-in-custom-filter) ich glaube, es wird nützlich sein. –

Eigentlich muss ich eine Zeichenfolge im Eingabefeld mit einem Trennzeichen im Trennzeichenfeld trennen. Zum Beispiel ist das Eingabefeld standardmäßig "Angular is awesome", wenn das Trennzeichen "#" ist, muss ich es wie folgt umstellen: "A # n # g # u # l # a # r # i # s # a # w # e # s # o # m # e " –

dieses Plunker Siehe: https://plnkr.co/edit/kXQGTj1sABKOuxObOhn7?p=preview.

Standard ist nicht erforderlich, nur prüfen, ob Trennzeichen vorhanden ist

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

Und die Verwendung

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

Quelle

2016-07-26 05:43:26 Silvinus

Danke Silvinus, das ist, was ich will! –

das Versuchen, seine Arbeit 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; 
     } 
    }; 
});

Quelle

2016-07-26 05:44:04

Danke Rejs, das ist genau das, was ich brauchte. Kann ich fragen: in

{{Gruß | Tokenize: false: Trennzeichen} }

, was ist der falsche Mittelwert? –

Ich gab Standard als falsch hier, Erster Filter, Standard ist wahr .. –

Ich sehe jetzt Vielen Dank! –

Kontrolle dieses plunkr Ich denke, das ist, was Sie brauchen, nicht wahr?

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>

Quelle

2016-07-26 05:46:23

Vielen Dank Mridul, das funktioniert Das wollte ich. –

AngularJS Filter synchronisiert nicht den Eingangswert von Modul

Antwort

Verwandte Themen