AngularJS-Format Array-Werte in Textbereich

Question

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

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

und einen Textbereich

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

I die, dass TextArea- enthält Werte x1, x2 (getrennt durch Komma) sehen kann. Ich möchte die Werte in separaten Zeilen anzeigen. Das bedeutet, dass alle Array-Werte durch ein neues Zeilenzeichen und nicht durch ein Komma getrennt sein sollten. Muss ich Filter dafür schreiben?

Answer 1

Sie können eine Anweisung schreiben, die ändert, wie ng-model Variablen in Eingabewerte und zurück konvertiert. Ich schreibe nur, um die Spitze von meinem Kopf ab, so ich habe keine Ahnung, ob es genau richtig, aber so etwas wie dies 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 wie folgt verwenden:

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

Answer 2

Das ist genau das, was ng-list tut:

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

Dies gilt auch für alle anderen Arten von Eingaben funktioniert, wie es ngModels in Parsern/Formatierer hakt.

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

Das Problem dabei ist, dass ng-Liste schließt sich immer mit a ‚‘ als Trennzeichen, es ist also nicht wirklich bi-direktional.

Answer 3

ein viel einfacherer Weg, dies zu tun in Angular> = 1,3, die in beiden Richtungen funktionieren:

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

Plunker