2014-04-08 43 views
12

我試圖創建一個textarea,其輸入綁定到一個JS數組,其中的條目對應於文本區域中的每一行。如何從AngularJS的textarea的每一行生成一個數組

我一直試圖使用ngList和它的可選參數來指定分隔符。我可以使它與默認(,)通過在textarea的每一行後面添加一個逗號,但我真的不想要求。

textarea的

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

與輸入:

test1 
test2 
test3 

生成的輸出是["test1\ntest2\ntest3"]

我所尋找的是:["test1","test2",test3"]

Plnkr Demo

+0

你的意思是[「test1」,「test2」,「test3」]? –

+0

@ChrisC是的,謝謝你接觸,現在更新 –

+0

@ZachL我很想看看你如何處理初始綁定...(因爲只要你添加了一些東西,它將你的數組壓縮到一個字符串'[「test1 ,test2,test3「,」新東西「]'http:// jsfiddle。net/ncapito/wKquG/21/ – Nix

回答

16

這角1.3進行了更新,現在是這樣工作的:

<textarea ng-model="list" ng-list="&#10;" ng-trim="false"></textarea> 
  • 添加ng-trim="false"指令到<textarea>標籤
  • 使用ASCII碼換行符:&#10;
+0

更新的plunker:http://plnkr.co/edit/UwC3O6dT7H5DUHUtvjv0?p=preview –

+0

如果我想更新ng模型並想在textarea中反映它,它不適用於ng-trim和ng -list屬性。當我刪除它的作品。但我需要這個功能。 – muasif80

0

你可以把標準輸出的角度爲您提供:

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

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

(!雖然你已經發布的解決方案要好得多)

+0

謝謝克里斯!這當然會起作用,但我當然會選擇更習慣的方法。有趣的是,我如何在一個小時內將我的頭撞到這個位置,然後在幾秒鐘內張貼在這個位置上,我就能夠正常工作。 –

+0

看起來像你想念'ngList'。 –

5

編輯:作爲角1.3,這答案已過時。

請參考@OrangeSalty's answer


the (1.2) ngList docs

如果形式/東西/那麼該值指定將被轉換成一個正則表達式。

我剛加了/的,它神奇的工作!

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

updated plnkr demo

相關問題