AngularJS ng-options下拉菜單綁定數值

這兩天做了一個頁面，結構比較簡單，最上方有兩個下拉菜單，選擇后點擊確定，瀏覽器會通過AJAX獲取數據並在下方生成表格。

因為剛接觸AngularJS，最近經常性地陷入某些"陷阱"中 = =

這次遇到的一個問題是，當我寫成形如以下格式的時候:

select
  option(ng-repeat="item in itemList" ng-model="choosenItem" value="{{item}}") {{item}}

可以生成下拉菜單，但無論其中的ng-model="choosenItem"還是value="{{item}}"，都無法綁定選擇的數值，打印出的choosenItem始終是itemList中的第一個值。

這種情況下，我能想到的方法，就是利用item作為option的ID，用原生JS或者jQuery進行取值，這樣代碼就寫得太拙計了。

 

 最終采取的方案是采用ng-options生成下拉菜單:

select(ng-model="choosenItem" ng-options="item for item in itemList")

這樣就可以直接將選擇的item綁定到ng-model上了，這種寫法比前面簡單多了。

 

AngularJS的常用指令一定要掌握全面，不然有時候就會陷入到這種困境，明明有很簡單的方法，卻要用很丑陋的方式來重新實現一遍。