1

看到这个plnkr http://plnkr.co/edit/WZHMuYY3y2wbI6UysvY6?p=preview

当在包含单选按钮组的 ng-repeat 上使用 ng-form 标签时，单选按钮是链接的，因此如果您在一个 ng-repeat 中选中一个单选按钮，它将在所有其他 ng-repeat 中取消选择。这让我感到困惑，因为 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>
4

2 回答 2

6

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

于 2013-10-01T11:06:57.673 回答
0

根据您的最后评论，我已经尝试过了，它有效。我没有使用内置的角度验证，但我相信它的工作原理都是一样的，而且非常简单

    <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==''"用来显示验证错误并禁用“提交一个”按钮。

老实说，带有复选框和收音机的角度表单验证和浏览器验证不是很可靠。

于 2013-10-01T14:42:44.107 回答