AngularJs单选按钮使用的是带有纳克重复NG-形式连接时， [英] AngularJs radio buttons are connected when using ng-form with ng-repeat

问题描述

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

在使用上包含一个单选按钮组中的NG-重复一个NG-form标签，单选按钮链接，所以如果你在一个检查一个单选按钮，NG-重复将在所有其他NG-重复取消。这让我为难，因为NG重复的模式是从其他项目，否则隔离。使用纳克重复时，这不仅是一个问题。它具有隔离范围自定义指令，它呈现一个

的多个实例时，也会发生

 ＆LT; D​​IV NG-形式NAME =myForm会＆GT;
 

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

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

 ＆LT;表格名称=的MainFormNG提交=submitAll（）＆GT;
      ＆LT; UL＆GT;
        ＆LT;李NG重复=项中的项目NG型=窗体＆GT;
          ＆LT;输入类型=文本必要的名称=名字吴模型=item.name/＆GT;
          ＆LT;输入类型=电台NAME =myRadioVALUE =R1NG-模式=item.radio/＆GT; R1
          ＆LT;输入类型=电台NAME =myRadioVALUE =R2NG-模式=item.radio/＆GT; R2
          ＆LT;跨度NG-秀= GTsubForm.name $ error.required。需要与LT; / SPAN＆GT;
          ＆LT;按钮式=按钮NG-禁用=$窗体无效NG点击=submitOne（项目）＆GT;提交的One＆LT; /按钮＆GT;
        ＆LT; /李＆GT;
      ＆LT; / UL＆GT;
      ＆LT;按钮式=提交NG-禁用=$ MainForm的无效。＆GT;提交所有与LT; /按钮＆GT;
    ＆LT; /表及GT;
 

解决方案

这些单选按钮由浏览器，因为你给他们相同的名字连接。刚落，在名称属性，事情开始按预期方式工作：
<一href=\"http://plnkr.co/edit/AEtGstSBV6oydtvds52Y?p=$p$pview\">http://plnkr.co/edit/AEtGstSBV6oydtvds52Y?p=$p$pview

See this plnkr http://plnkr.co/edit/WZHMuYY3y2wbI6UysvY6?p=preview

When using a ng-form tag on an ng-repeat which contains a radio button group, the radio buttons are linked so if you check a radio button in one ng-repeat it will deselect in all the other ng-repeats. This puzzles me as the model of the ng-repeat is otherwise isolated from the other items. This is not only an issue when using ng-repeat. It also occurs when having multiple instances of a custom directive with isolated scope which renders a

<div ng-form name="myForm">

In the Plnkkr try adding a number of items and check the radio buttons on some of the items. They should be independent, but they are not.

Is this a bug in Angular? If not why does it work this way and how can I work around it?

<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>

解决方案

Those radio buttons are "connected" by a browser since you are giving them the same name. Just drop the name attribute and things start to work as expected: http://plnkr.co/edit/AEtGstSBV6oydtvds52Y?p=preview

这篇关于AngularJs单选按钮使用的是带有纳克重复NG-形式连接时，的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！