Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

ng:repeat-ed radio buttons are broken #305

Closed
IgorMinar opened this issue Mar 15, 2011 · 6 comments
Closed

ng:repeat-ed radio buttons are broken #305

IgorMinar opened this issue Mar 15, 2011 · 6 comments
Labels
type: bug
Milestone
Forms rewrite

Comments

@IgorMinar
Copy link
Contributor

when radio buttons are nested in ng:repeat, they are broken because angular renames name="foo" to name="@foo". In ng:repeat scopeid is different for each button, which messes up the grouping of radio buttons by name.

<html>
<head>
  <script src="http://code.angularjs.org/angular-0.9.13.js" ng:autobind></script>
  <script>
     function MyCntrl() {
        this.list_of_items = ['this', 'that', 'the other'];
      }
  </script>
</head>
<body ng:controller="MyCntrl">
<ul>
  <li ng:repeat="item in list_of_items">
    <input type="radio" name="choice" value="{{item}}"
           id="item_{{$index}}">
    <label for="item_{{$index}}">
      <code>{{item}}</code>
    </label>
  </li>
</ul>
choice: {{choice}}
</body>
</html>
@mhevery
Copy link
Contributor

mhevery commented Mar 16, 2011

actually, this works as intended. The issue is this:

<div ng:repeat="item in items">
  <input name="type" type="radio"> phone</br>
  <input name="type" type="radio"> email</br>
</div>

in the case above you don't wan't all of the inputs to be changing in unison, you want each repeat to be self contained. This is what you want in most cases!

but in this case the self containment is wrong

<input ng:repeat="item in items" type="radio" name="type">

so I am not sure how can we easily change this? Or how can angular know which one do you mean when you do this.

@IgorMinar
Copy link
Contributor Author

both scenarios are reasonable and angular should have answer for both of them.

@mhevery
Copy link
Contributor

mhevery commented Mar 16, 2011

agreed, but not sure what the best approach is here. need to sleep on this.

@IgorMinar
Copy link
Contributor Author

Interestingly because of how setting values on objects coming from the parent scope works, this code works around the problem:

<html>
<head>
  <script src="http://code.angularjs.org/angular-0.9.13.js" ng:autobind></script>
  <script>
     function MyCntrl() {
        this.list_of_items = ['this', 'that', 'the other'];
        this.foo = {};
      }
  </script>
</head>
<body ng:controller="MyCntrl">
<ul>
  <li ng:repeat="item in list_of_items">
    <input type="radio" name="foo.choice" value="{{item}}"
           id="item_{{$index}}">
    <label for="item_{{$index}}">
      <code>{{item}}</code>
    </label>
  </li>
</ul>
choice: {{foo.choice}}
</body>
</html>

@IgorMinar IgorMinar mentioned this issue Oct 17, 2011
Closed
@IgorMinar
Copy link
Contributor Author

this is still broken in 0.10.3: https://gist.github.com/1293065

Proposed solution: instead of using current scope id in name attribute, use the scope id to which the ng:model is attached to.

@mhevery mhevery closed this as completed Jan 18, 2013
@johannesjo
Copy link

Any news on this one? Still is an issue for me....

@takeratta takeratta mentioned this issue Dec 14, 2023
Open
@guypod guypod mentioned this issue Dec 15, 2023
Open
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
type: bug
Projects
None yet
Milestone
Forms rewrite
Development

No branches or pull requests
3 participants
@mhevery @IgorMinar @johannesjo