Radio button not working within nested ng-repeats and filter

Question

i have to following issue. I have an nested ng-repeat with two radio-buttons, when i select an radion-button the value is set correctly to the model. But when i filter to a value that's not in the collection the value is not set to the view (the model is still correct)

to reproduce:

Example

when you check all 3 radio-buttons to lets say 'read', than type 'x' into the input to filter, now remove the value from the input. the last radio is selected the others are not.

ps. i've tryed ng-value instead of value.

controller:

vm.list = [{id: 1, name: 'Item1', items: [{id: 1, name: 'SubItem1.1'}, {id: 2, name: 'SubItem1.2'}, {id: 3, name: 'SubItem1.3'}]}]

view:

<input type="text" ng-model="search" /> 
<ul>
 <li ng-repeat="item in vm.list">
   <h4 ng-bind="item.name"></h4>
   <ul>
     <li ng-repeat="subitem in item.items | filter:search">
       <h4 ng-bind="subitem.name"></h4>

       <input type="radio" name="{{item.id}}{{subitem.id}}" ng-model="subitem.permission" value="read" /> Read
       <input type="radio" name="{{item.id}}{{subitem.id}}" ng-model="subitem.permission" value="write" /> Write
     </li>
   </ul>
 </li>

Nour Sammour · Accepted Answer · 2016-02-26 12:25:48Z

1

change the input name from

name="{{item.id}}{{subitem.id}}"

to

name="{{subitem.id}}"

answered Feb 26, 2016 at 12:25

Nour Sammour

2,8521 gold badge23 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2257701 Over a year ago

this works! thank you!!! but why is this name="{{item.id}}{{subitem.id}}" not working?

Nour Sammour Over a year ago

i didn't find the reason. i don't know why your input name didn't work

Witchfinder Over a year ago

I suspect it's down to scoping. Each repeat creates a new scope. To be honest, it looks like a bug in Angular model binding itself to me.

user2257701 Over a year ago

if you dont have an unique key in subitem you also can use {{item.id + subitem.id }} this works

Collectives™ on Stack Overflow

Radio button not working within nested ng-repeats and filter

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related