AngularJS ng-options下拉菜单绑定数值

Posted 2020-07-15 iStream

这两天做了一个页面，结构比较简单，最上方有两个下拉菜单，选择后点击确定，浏览器会通过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的常用指令一定要掌握全面，不然有时候就会陷入到这种困境，明明有很简单的方法，却要用很丑陋的方式来重新实现一遍。