AngularJS-format array-Werte in der textarea

Ich habe eine angularJS-Anwendung, in der ich ein array.

  $scope.data[0] =  x1;
  $scope.data[1] =  x2;

und eine text-area 

  <textarea ng-model="data"> </textarea>

Kann ich sehen, dass textarea enthält Werte x1, x2 (durch Komma getrennt). Ich möchte zeigen die Werte auf separaten Zeilen. Also alle array-Werte werden jeweils durch ein neue-Zeile-Zeichen nicht durch ein Komma. Brauche ich zu schreiben, der filter für diese?

  • U können versuchen, die filter und wenn es nicht klappt, frag nochmal 🙂 Warum nicht u versuchen Sie diese Lösung?
  • Ich denke, es tut toString-Methode auf das array,um die Rückkehr x1,x2. Sie müssen einen filter erstellen, der für es.
InformationsquelleAutor Shamaila Tahir | 2013-07-11
  1. 15

    Schreiben Sie eine Richtlinie, die ändert, wie ng-model konvertiert Variablen in input-Werte und zurück. Ich Schreibe dies aus der Spitze von meinem Kopf, also habe ich keine Ahnung, ob es genau stimmt, aber so etwas könnte es tun:

    app.directive('splitArray', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attr, ngModel) {

            function fromUser(text) {
                return text.split("\n");
            }

            function toUser(array) {                        
                return array.join("\n");
            }

            ngModel.$parsers.push(fromUser);
            ngModel.$formatters.push(toUser);
        }
    };
});

    Und Sie können es verwenden, wie diese:

      <textarea ng-model="data" split-array> </textarea>
    InformationsquelleAutor Karen Zilles
  2. 15

    Dies ist genau das, was ng-list hat:

    <textarea ng-model="someArray" ng-list="/\n/"></textarea>

    Diese funktioniert auch auf allen anderen Arten von Eingängen, wie es Haken in ngModels Parser/formatter.

    Sehen diese Geige: http://jsfiddle.net/xbYzT/1/

    Das problem mit diesem ist, dass die ng-Liste immer verbindet mit einem ',' als Trennzeichen, es ist also nicht wirklich bidirektional.

    • Das einzige problem mit diesem ist, dass ngList immer schließt sich einem bestehenden array mit , als separator, ignorieren Sie die Benutzer-gewählten Trennzeichen - auch wenn es nicht eine regex.
    • Ted: ja, das ist ein hässliches Problem - und es ist nicht einfach zu lösen, da Sie nicht wirklich rückgängig Aufteilung von regexp. Aktualisiert den Kommentar zu reflektieren.
    • AngularJS 1.3 ist das entfernen der Unterstützung für regexes in ngSplit, so ist es ein strittiger Punkt.
    InformationsquelleAutor Martin Probst
  3. 14

    Einen viel einfacheren Weg, dies zu tun in Gewinkelt >= 1.3, die funktioniert in beide Richtungen:

    <textarea ng-model="yourStringArray" ng-list="&#10;" ng-trim="false"></textarea>

    Plunker

    • Dies muss wirklich mehr upvotes. Was für eine tolle Antwort.
    • sehr schöne Stirn!
    • vielen Dank, Ihre Stirn sieht ziemlich nett.
    InformationsquelleAutor Saeb Amini
Schreibe einen Kommentar