在 AngularJS 中使用 ng-model 绑定表单数据非常方便，但是有时候在单选按钮上使用 ng-model 会遇到问题。
问题描述
考虑以下 HTML 代码片段：
<form>
<label>
<input type="radio" name="gender" value="male" ng-model="user.gender">男
</label>
<label>
<input type="radio" name="gender" value="female" ng-model="user.gender">女
</label>
</form>当我们尝试选择其中一个单选按钮时，user.gender 并没有更新为对应的值。这是因为 AngularJS 在单选按钮中的工作方式与复选框不同。
解决方法
要解决这个问题，我们需要使用 ng-value 指令和 ng-checked 指令，如下所示：
<form>
<label>
<input type="radio" name="gender" ng-value="'male'" ng-model="user.gender" ng-checked="user.gender === 'male'">男
</label>
<label>
<input type="radio" name="gender" ng-value="'female'" ng-model="user.gender" ng-checked="user.gender === 'female'">女
</label>
</form>现在，当我们选择单选按钮时，user.gender 将会被正确地更新为选中的值。这是因为 ng-model 指向的是 ng-value 指令所绑定的表达式。
示例代码
以下是一个完整的示例代码，演示了如何在 AngularJS 的单选按钮中使用 ng-model：
-- -------------------- ---- -------
--------- -----
----- ---------------
------
--------------- -- --------- ----- ---------------
------- ------------------------------------------------------------------------------------
-------
----- -----------------------
------
-------
------ ------------ ------------- ----------------- ---------------------- ----------------------- --- ---------
--------
-------
------ ------------ ------------- ------------------- ---------------------- ----------------------- --- -----------
--------
-------
-------- -- ----------- ------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
----------- - -
------- ------
--
---
---------
-------
-------结论
在 AngularJS 中，当我们需要在单选按钮上使用 ng-model 时，我们应该使用 ng-value 和 ng-checked 指令来确保正确更新绑定的表单数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25275