角度单选按钮多种形式答案

【问题标题】：Angular Radio Buttons Multiple Forms角度单选按钮多种形式
【发布时间】：2017-02-20 08:43:27
【问题描述】：

我在单选按钮上玩得很开心。周二快乐。

我有多个名字，每个名字都有一个表格，并且可以选择一个名字作为“主要名字”。每个名称都可以独立编辑和提交。当名称被选为“主”（1）时，其他将设置为0。

在函数 updatePrimary() 中，我将正确名称的 primary_name 值设置为 1，其余设置为 0。但其他单选按钮并没有取消选择它们的单选按钮（嗯无论如何应该只选择另一个）。

像这样：

<ng-include src="'app/names/__edit.html'" ng-repeat="name in names track by $index"></ng-include>

<!-- __edit.html -->
<form name="names[$index]">
    <input name="primary_name" class="form-control" type="radio" ng-click="updatePrimary($index)" ng-model="name.primary_name" ng-value="name.primary_name" ng-checked="<% name.primary_name == 1 %>"/>
</form>

我不明白的是我在哪里绑定 name.primary_name 到按钮，给它检查条件（== 1），那么为什么当我更新模型时显示没有更新？重申一下，它在模型中是正确的，这是一个 UI / 绑定问题。

还有一点需要注意 - 我有一个保存按钮，当表单脏时启用。选择单选按钮不会触发此操作。按钮是这样的：

<button class="name-save" ng-disabled="names[$index].$pristine" ng-click="save($index)">Save</button>

【问题讨论】：

如果单选按钮采用不同的形式，那么您不能在另一个选择中重置它们，所有这些都应该采用一种形式

标签： angularjs radio-button

【解决方案1】：

试试这个：

<ng-include src="'app/names/__edit.html'" ng-repeat="name in names track by $index"></ng-include>

<!-- __edit.html -->
<form name="names[$index]">
<input id="radio_{{$index}}" name="primary_name" class="form-control" type="radio" ng-click="updatePrimary($index)" ng-model="name.primary_name" ng-value="name.primary_name" ng-checked="<% name.primary_name == 1 %>"/>

在无线电输入字段上使用动态 id 应该可以解决问题。

还请记住，ng-repeat 不适用于表单。表格不会重复。您必须使用ng-form 重复表单。

【讨论】：