问题描述图片:
我用div模拟的radio按钮,用ng-checked实现radio的切换选择,当点击第一个模拟的div点击的时候就将此div下的radio的ng-checked设置为true,以此类推,但是当点击提交之后,formData里没有数据,网上搜了一下是ng-model和ng-checked不能同时使用,请问还有别的思路和方法么?
推荐这样写:
<input ng-model="signup.mode"
ng-class="{'active': signup.mode == 'person'}"
type="radio"
value="person"
id="person-radio">
<label for="person-radio">个人用户</label>
<input ng-model="signup.mode"
ng-class="{'active': signup.mode == 'company'}"
type="radio"
value="company"
id="company-radio">
<label for="company-radio">企业用户</label>
使用 label 而不是 div 来模拟
radio 按钮的理由是:label 可以用 for 属性与 input[radio] 的 id 进行联动(这是
HTML 内置的行为),于是就不需要额外的数据绑定。当前激活的的 input[radio] 会把 value 的值赋给ng-model 绑定的对象上去。
另外,ngChecked 的作用是给元素加上 checked 属性,这个属性在
HTML 里的定义是用来指示是否被默认选中,而不是切换被选中项。当然你可以这么用,然而 ngChecked 是要求里面的表达式返回布尔值的(以此来判定是否 checked),看你的代码:
-
点击
div的时候调用了isActive('x'),这个不像是设定当前激活input[radio]的方法,反而像是返回是否为激活input[radio]的方法 -
ng-checked直接传入的表达式是布尔值吗?我不得而知。然而看起来isActive()方法才是应该出现在这里的才对。
本文探讨了在HTML中使用div模拟Radio按钮时遇到的问题,特别是如何在点击div触发Radio切换的同时,正确更新formData数据。通过采用正确的HTML结构和属性使用,避免了ng-model和ng-checked不能同时使用的限制,实现了有效的数据绑定。
2624

被折叠的 条评论
为什么被折叠?



