Note that there are some explanatory texts on larger screens.

plurals
  1. POAngularJs radio buttons are connected when using ng-form with ng-repeat
    primarykey
    data
    text
    <p>See this plnkr <a href="http://plnkr.co/edit/WZHMuYY3y2wbI6UysvY6?p=preview" rel="nofollow">http://plnkr.co/edit/WZHMuYY3y2wbI6UysvY6?p=preview</a></p> <p>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</p> <pre><code>&lt;div ng-form name="myForm"&gt; </code></pre> <p>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.</p> <p>Is this a bug in Angular? If not why does it work this way and how can I work around it?</p> <pre><code>&lt;form name="mainForm" ng-submit="submitAll()"&gt; &lt;ul&gt; &lt;li ng-repeat="item in items" ng-form="subForm"&gt; &lt;input type="text" required name="name" ng-model="item.name"/&gt; &lt;input type="radio" name="myRadio" value="r1" ng-model="item.radio" /&gt; r1 &lt;input type="radio" name="myRadio" value="r2" ng-model="item.radio" /&gt; r2 &lt;span ng-show="subForm.name.$error.required"&gt;required&lt;/span&gt; &lt;button type="button" ng-disabled="subForm.$invalid" ng-click="submitOne(item)"&gt;Submit One&lt;/button&gt; &lt;/li&gt; &lt;/ul&gt; &lt;button type="submit" ng-disabled="mainForm.$invalid"&gt;Submit All&lt;/button&gt; &lt;/form&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload