Question

请参阅此plnkr http://plnkr.co/edit/WZHMuYY3y2wbI6UysvY6?p=preview

在包含单选按钮组的ng-repeat上使用ng-form标签时，单选按钮被链接，因此如果您在一次重复重复中选中一个单选按钮，它将取消选择所有其他重复按钮。这让我很困惑，因为ng-repeat的模型与其他项目隔离。这不仅是使用ng-repeat时的问题。当具有隔离范围的自定义指令的多个实例呈现

时，也会发生这种情况

<div ng-form name="myForm">

在Plnkkr中尝试添加一些项目并检查某些项目上的单选按钮。它们应该是独立的，但它们不是。

这是Angular中的错误吗？如果不是为什么它以这种方式工作，我该如何解决呢？

<form name="mainForm" ng-submit="submitAll()">
      <ul>
        <li ng-repeat="item in items" ng-form="subForm">          
          <input type="text" required name="name" ng-model="item.name"/>
          <input type="radio" name="myRadio" value="r1" ng-model="item.radio" /> r1
          <input type="radio" name="myRadio" value="r2" ng-model="item.radio" /> r2
          <span ng-show="subForm.name.$error.required">required</span>
          <button type="button" ng-disabled="subForm.$invalid" ng-click="submitOne(item)">Submit One</button>
        </li>
      </ul>
      <button type="submit" ng-disabled="mainForm.$invalid">Submit All</button>
    </form>

Answer 1

这些单选按钮由浏览器“连接”，因为您为它们指定了相同的名称。只需删除name属性，事情就会按预期开始工作： http://plnkr.co/edit/AEtGstSBV6oydtvds52Y?p=preview

Answer 2

根据您的上一条评论，我已经尝试了这个并且它有效。我没有使用内置的角度验证，但我相信它的工作方式完全相同，非常简单

    <li ng-repeat="item in items" ng-form="subForm">
      <input type="text" required name="name" ng-model="item.name"/>
      <input type="radio" value="r1" ng-model="item.radio" /> r1
      <input type="radio" value="r2" ng-model="item.radio" /> r2
      <span ng-show="item.radio==''">required</span>
      <button type="button" ng-disabled="subForm.$invalid || item.radio==''" ng-click="submitOne(item) ">Submit One</button>
    </li>

请参阅http://wiredbeast.com/coolframework/stackover.html

上的工作示例

诀窍是使用ng-show="item.radio==''"来显示验证错误并禁用“提交一个”按钮。

在我的诚实意见中，角度表单验证和带复选框和无线电的浏览器验证不是很稳固。

当使用ng-form和ng-repeat时，AngularJs单选按钮被连接

2 个答案: