200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > angular js 默认选中_angularjs--加载数据默认选中option

angular js 默认选中_angularjs--加载数据默认选中option

时间:2021-09-26 07:00:02

相关推荐

angular js 默认选中_angularjs--加载数据默认选中option

最近在工作遇到一个问题,项目是用angularjs做的。

项目有一个需求是需要编辑资料,资料中有一个地方是有下拉框的。学艺不精的在下,在开始想到的是直接将给div添加ng-model,HTML代码如下:

1

2 --请选择--

3 系统管理员

4 片区管理员

5 终端代表

6

接着,问题就来了,在页面中显示的时候,并没有选中之前load进来的数据,而是会有一个空白选项。

然后,换了个办法,用ng-value给select赋值,然后在option中用ng-selected="{{role_id}}==1"这样的方式来判断是否选中,这次,空白项是没有了,但是还是没有选中我要的那个option啊!

代码如下:

1

2 --请选择--

3 系统管理员

4 片区管理员

5 终端代表

6

结果如图:

没办法,又要换一个办法了。怎么办呢?突然想到是不是可以用ng-options来动态加载option,然后在用ng-model来匹配呢?想做就做!代码如下:

//html

//js

$scope.list5 = [{"id":2,"name":"终端代表"},{"id":3,"name":"片区管理员"},{"id":4,"name":"系统管理员"},{"id":5,"name":"销售市场经理"}]

这次呢,又回到了开始你的样子:出现了空白选项:

不过这一次,总算是让我看到了和最开始的差别在哪:两张图的value是不同的,最开始的value是一个值,而后面的value是一个对象,问题会不会出在这里呢?然后我尝试将ng-options改了一下:

天可怜见!终于成功了!!

我想来想去,只能认为是这样的:在最开始的时候,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能找到对应值,因此才选中。

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

谢谢各位。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。