2014-04-08 3 views
12

generieren Ich versuche, ein Textfeld zu erstellen, dessen Eingabe an ein JS-Array gebunden ist, wobei Einträge jeder Zeile im Textbereich entsprechen.Wie kann ich ein Array aus jeder Zeile eines Textfelds mit AngularJS

Ich habe versucht, ngList mit seinem optionalen Parameter zu verwenden, um das Trennzeichen zu spezifizieren. Ich kann machen es mit der Standardfunktion (,) durch Hinzufügen eines Kommas nach jeder Zeile der Textarea, aber ich will wirklich nicht verlangen, dass.

die TextArea-

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

mit dem Eingang:

test1 
test2 
test3 

Die erzeugte Ausgabe ist ["test1\ntest2\ntest3"]

Was ich suche ist: ["test1","test2",test3"]

Plnkr Demo

+0

Meinst du ["test1", "test2", "test3"]? –

+0

@ChrisC Ja, vielen Dank, dass du das eingefangen hast, jetzt aktualisiere ich –

+0

@ZachL Ich bin gespannt, wie du die anfängliche Bindung bearbeitest ... (denn sobald du etwas hinzufügst, verdichtet sich dein Array zu einer Zeichenkette '[" test1 , test2, test3 "," etwas neues "]' http: // jsfiddle.net/ncapito/wKquG/21/ – Nix

Antwort

16

Dies wurde in Angular 1.3 aktualisiert und arbeitet nun wie folgt aus:

<textarea ng-model="list" ng-list="&#10;" ng-trim="false"></textarea> 
  • ng-trim="false" Richtlinie zum
  • <textarea> Tag fügen Sie den ASCII-Code für Newline-Zeichen verwenden : &#10;
+0

ein aktualisierter Plocker: http://plnkr.co/edit/UwC3O6dT7H5DUHUtvjv0?p=preview –

+0

Falls ich das ng-Modell aktualisieren möchte und es in der Textarea widerspiegeln will, funktioniert es nicht mit ng-trim und ng -Listenattribute Wenn ich es entferne, funktioniert es. Aber ich brauche diese Funktion. – muasif80

0

Sie könnten die Ausgangswinkel geteilt gibt Ihnen:

var result = ["test1\ntest2\ntest3"][0].split("\n") 

// result = ["test1", "test2", "test3"] 

(! Obwohl die Lösung, die Sie gebucht haben, viel besser ist)

+0

Danke Chris! Das würde sicherlich funktionieren, aber natürlich werde ich mich für den idiomatischen Ansatz entscheiden. Komisch, wie ich eine Stunde lang mit dem Kopf dagegen stoße, und dann innerhalb von Sekunden nach der Veröffentlichung von SO funktioniert es. –

+0

aussehen wie Sie die 'ngList' verpassen. –

5

EDIT: Ab Angular 1.3, diese Antwort ist veraltet.

Bitte beachten Sie @OrangeSalty's answer


Von the (1.2) ngList docs:

Wenn der angegebene Wert wird in Form/etwas/dann in einen regulären Ausdruck umgewandelt werden.

Ich habe gerade die / 's hinzugefügt und es magisch funktioniert!

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

updated plnkr demo

Verwandte Themen