angularjs中radio表单提交问题


clipboard.png
我用div模拟的radio按钮,用ng-checked实现radio的切换选择,当点击第一个模拟的div点击的时候就将此div下的radio的ng-checked设置为true,以此类推,但是当点击提交之后,formData里没有数据,网上搜了一下是ng-model和ng-checked不能同时使用,请问还有别的思路和方法么?

form angularjs radio JavaScript

忧郁的消失 9 years, 9 months ago

推荐这么写:


 <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() 方法才是应该出现在这里的才对。

ruben answered 9 years, 9 months ago

Your Answer