不管是做一般的表單還是 Web 系統，輸入方塊都是一個很常拿來當做主要輸入的元素。而在我們一開始的 AngularJS 入門教學 - Hello AngularJS!! 中就看過雙向資料綁定(Two-way data-binding)的威力。
先再來溫習一下：
1 2 3 4 | <div class="well span4" style="margin-top:20px;"> <input type="text" ng-model="tags"> <div>tags = {{ tags }}</div> </div> |
這邊將輸入方塊綁上 tags 變數，接著在下方的 div 中顯示其內容。所以當輸入方塊輸入什麼鬼東西都是一五一十的顯示出來：
不過若是想要做到那種可以使用某種符號來將輸入的內容分割成陣列的話，一般可能都是要自己再處理。不過在 AngularJS 中則只要透過 ng-list 指令就能快速的達到效果了。
這邊筆者只有在原本輸入方塊上加上 ng-list 指令：
1 | <input type="text" ng-model="tags" ng-list> |
一樣再隨變輸入內容，然後試著使用逗號(comma)來區隔的話：
嘿！tags 一秒就變成陣列了。可別以為只能使用逗號(comma)來分割成陣列而已喔！剛剛我們在使用 ng-list 時並沒有給它屬性值，若這邊有提供的話，AngularJS 將會使用它來分割陣列哩。
假設筆者想用 | 來分割的話：
1 | <input type="text" ng-model="tags" ng-list="|"> |
筆者輸入 "jquery,angularjs|css3" 了這樣的內容，但因為是指定要使用 | 來分割，所以下面陣列的內容就是只有兩個元素：
我想應該也會有人想用空格(space)來分隔，所以可能就會把它設定成：
1 | <input type="text" ng-model="tags" ng-list=" "> |
可是...通通沒有用~
那就沒辦法了嗎？別擔心，當我們在設定 ng-list 屬性值時，它還能支援正規表示法(Regular Expression)的喔！
所以如果是想要用空格(space)來分隔的話：
1 | <input type="text" ng-model="tags" ng-list=/\s/> |
一樣的內容再來一次：
你看看你看看，真的是很方便的啦！不過使用正規表示法(Regular Expression)的設定方式還有個特別的地方，這請各位試著將 Model 先進行初始化後再試看看吧！