angular中的select标签的使用

前端之家收集整理的这篇文章主要介绍了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进来的数据,而是会有一个空白选项。

@H_403_73@

技术分享

  然后,换了个办法,用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能找到对应值,因此才选中。

  以上是一点拙见,如有错误还请大家指出。

原文链接:https://www.f2er.com/angularjs/147210.html

猜你在找的Angularjs相关文章