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