Anzeige der Eingabefeldelemente in einer neuen Zeile

Question

Wir haben ein Problem, wo wir die Elemente eines Arrays in einem neuen line.below angezeigt werden möchten, ist mein Code

<textarea class="form-control" type="text" data-ng-model="arrColumnNames" ng-list="&#10;" ng-trim="false" required 
    name="arrColumnNames" required minlength="0" 
    placeholder="" 
    class="form-control"></textarea> 

<textarea id="test" class="form-control" style="margin-top:2%; width: 60%;" rows="10" > 
Resulting definition:<![CDATA[<?xml version='1.0' encoding='UTF-8'?> 
<Scols > 
<scol>{{arrColumnNames}}</scol> 
</Scols> 
]]> 
</textarea> 

In dem obigen Code, in dem ersten Eingabetextbereich (mit textarea class = "form-control"), gibt der Benutzer die Array-Elemente ein. Ich wollte, dass diese vom Benutzer eingegebenen Array-Elemente im Textbereich mit id = "test" angezeigt werden. Wenn das Array im Textfeld mit id = "test" angezeigt wird, wird es horizontal angezeigt, z. wenn die Benutzereingaben drei Elemente im Texteingabebereich (mit Textbereich class = „Form-control“), dann wird das Textfeld mit id = „test“ werden die unter

<scol>["s1","s2","s3"]</scol> 

Anzeige mag ich wissen, wie angezeigt die Elemente wie unten.

erwartete Ausgabe

<scol>s1</scol> 
<scol>s2</scol> 
<scol>s3</scol> 

Gibt es eine Möglichkeit, die Elemente der Anordnung in dem obigen Format anzuzeigen. Jede Hilfe auf dem oben genannten wird sehr geschätzt. Vielen Dank im Voraus

Answer 1

sollten Sie ng-repeat

<Scols> 
    <scol ng-repeat="values in arrColumnNames">{{values}}</scol> 
</Scols> 

die jsfiddle