angular 循环单选框默认选中无效的解决办法 ng-model 和ng-checked

时间:2024-05-20 21:50:52

最近做项目遇到一个问题,模态框弹出查询条件,里面循环几个单选框默认选中,然后有一个清空按钮,窗口样式如下。

但是这个单选框默认选中和清空这里我搞了一天,尝试了多种办法,用ng-model和ng-checked都敲了一遍。

angular 循环单选框默认选中无效的解决办法 ng-model 和ng-checked

代码介绍:

angular 循环单选框默认选中无效的解决办法 ng-model 和ng-checked

下面content的值就是循环QuerySelect的内容

angular 循环单选框默认选中无效的解决办法 ng-model 和ng-checked

注意事项:1、一定要给input加上name属性      2、ng-model和ng-checked不能一起使用。

一、ng-model:  (默认选中有问题,但是清空没有问题,用ng-init可以解决默认选中的问题,so入坑)

1、如果直接用ng-model,并不能设置默认选中的样式(默认中失效),查了一下网上说是由于在ng-repeat内部,每次loop都会创建新的scope,需要加入$parent对ng-init父层ng-model绑定的值赋值,但是我这循环太多层了不知道怎么用$parent(原谅我的无知),试了几次后还是无法实现,转而用ng-checked

2.因ng-checked清空无效,于是重回ng-model的坑。ng-model清空正常,冲浪了半天后发现有网友提议用ng-init赋值(好像上面有说ng-init,但之前带着墨镜没有看到这个)

3、加上ng-init终于跳出坑了。<div ng-if="item.statu" ng-init="content.value=item "></div>

 

二、ng-checked: (默认选中没问题,但是清空有问题,目前找不解决办法,so先弃坑)

1、将ng-model改为ng-checked="item.statu",轻轻松松解决默认选中的问题。当我以为终于跳出这个坑后,嗯!你们懂的,后面有一个更大的坑的等着我。

2、还有一个清空等着我,清空后设回默认选中的值,但是按钮样式没变还是之前选中的那个按钮。捣鼓了一会还是不行,弃坑重回ng-model的坑