angular中的select标签的使用
|
最近在工作遇到一个问题，项目是用angularjs做的。 项目有一个需求是需要编辑资料，资料中有一个地方是有下拉框的。学艺不精的在下，在开始想到的是直接将给div添加ng-model，HTML代码如下：
1 <select ng-model="role_id1" ng-model="role_id"> 2 option value="">--请选择--</option3 ="1">系统管理员4 ="2">片区管理员5 ="3">终端代表6 select>
接着，问题就来了，在页面中显示的时候，并没有选中之前load进来的数据，而是会有一个空白选项。 然后，换了个办法，用ng-value给select赋值，然后在option中用ng-selected="{{role_id}}==1"这样的方式来判断是否选中，这次，空白项是没有了，但是还是没有选中我要的那个option啊！ 代码如下： ng-value="role_id1" 2 ="1" ng-selected="{{role_id1}}==1"="2"="{{role_id1}}==2"5 ="3"="{{role_id1}}==3" 结果如图：
没办法，又要换一个办法了。怎么办呢？突然想到是不是可以用ng-options来动态加载option,然后在用ng-model来匹配呢？想做就做！代码如下： //html
< ng-options="o.name for o in list5"></> //js $scope.list5 = [{"id":2,"name":"终端代表"},{"id":3,"name":"片区管理员"},{"id":4,"name":"系统管理员"},{"id":5,"name":"销售市场经理"}] 这次呢，又回到了开始你的样子：出现了空白选项: 不过这一次，总算是让我看到了和最开始的差别在哪：两张图的value是不同的，最开始的value是一个值，而后面的value是一个对象，问题会不会出在这里呢？然后我尝试将ng-options改了一下： ="o.id as o.name for o in list5" 天可怜见！终于成功了！！
我想来想去，只能认为是这样的：在最开始的时候，ng-model其实是有赋值给select的，只是赋值的方式是一个对象，也就是"value=?number:4?"这样，而option中没有与之对应的值，所以没有被默认选中；然后之后的ng-selected为什么也没有选中呢？我认为是因为在dom加载的时候，option中的ng-selected="{{role_id1}}==1"这样是有错误的，在dom加载时，{{role_id1}}是没有值的，所以ng-selected的值都没有等于true，因此没有选中；而最后，ng-options用的是as...for...这种形式，将option的value设置为“number:3”这种形式，与ng-model的值的形式是对应的，所以ng-model能找到对应值，因此才选中。 以上是一点拙见，如有错误还请大家指出。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
