angularjs中radio表单提交问题

最新推荐文章于 2021-03-22 08:27:57 发布

heartbeaty

最新推荐文章于 2021-03-22 08:27:57 发布

阅读量1.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： angularjs 文章标签： angularjs 表单

本文链接：https://blog.youkuaiyun.com/liu4071325/article/details/50233455

angularjs 专栏收录该内容

6 篇文章

订阅专栏

本文探讨了在HTML中使用div模拟Radio按钮时遇到的问题，特别是如何在点击div触发Radio切换的同时，正确更新formData数据。通过采用正确的HTML结构和属性使用，避免了ng-model和ng-checked不能同时使用的限制，实现了有效的数据绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述图片：

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