AngularJS Radio button not binding

Question

I am a complete beginner at using Angular.js and I've run into an issue with data binding in a radio button situation. The related HTML code looks like this:

<label class="options_box" ng-repeat="item in item_config_list.item_config"> 
    <input type="radio" name="config" ng-model="selectedConfig" ng-value="item"> 
        {{ item.item }}
    </input>
</label>

and controller is

App.controller('controller', function App ($scope, $http) {

    $.getJSON('res/prop/configs.json', function(data) {
    $scope.item_config_list = data;

});

json file looks like this:

{
    "item_config": [
    {
        "name": "Config1",
        "configNr": "1"
    },
    {
        "name": "Config2",
        "configNr": "2"
    },
]
}

How do I make the name property of the selected item from the radio list go into the "selectedConfig" object? I am later referring to the selectedConfig object to fetch data from a backend.

I might also add that the duplication of radio buttons is working - as is the labelling of the buttons. They are named properly, they just aren't conferring the intended value to the intended object.

Edit: Problem solved! I refactored above HTML code to

<label class="options_box" ng-repeat="item in item_config_list.item_config"> 
    <input type="radio" name="config" ng-model="$parent.selectedConfig" ng-value="item.name"> 
        {{ item.name }}
    </input>
</label>

Your $.getJSON is outside of your controller. Add it in your Controller — user1608841
– user1608841, Commented Jul 16, 2015 at 10:56
Sorry, I copied and pasted from my IDE and I have another one of these properties that I didn't feel was needed in the question so the first }); was just an artifact. — Alex
– Alex, Commented Jul 16, 2015 at 11:04

Starscream1984 · Accepted Answer · 2015-07-16 12:30:47Z

1

I think you just need to change the ng-value binding:

<input type="radio" name="config" ng-model="selectedConfig" ng-value="item.item"> 
    {{ item.item }}
</input>

That should then bind the name string in item.item to your scope's selectedConfig

Slight confusion from your ng-repeat objects being called item and the first property of each object in that collection is also called item

UPDATE:

From the fiddle you provided I have a working example for you to look at:

https://jsfiddle.net/sc622go8/

The underlying issue was that the ng-repeat creates a child scope, so to refer to the selectedConfig variable, you need to use $parent.selectedConfig:

<input type="radio" name="config" ng-model="$parent.selectedConfig" ng-value="item.item"> 
    {{ item.item }}
</input>

edited Jul 16, 2015 at 12:30

answered Jul 16, 2015 at 11:18

Starscream1984

3,0621 gold badge21 silver badges27 bronze badges

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

4 Comments

Alex Over a year ago

I tried adding a console.log(selectedConfig) into the script to fetch from the backend and it's "undefined", even after I added the extra item.item

Alex Over a year ago

It is referring to the first property of the items - would that be an issue?

Alex Over a year ago

Literally solved it at the same time - thank you! It was the $parent in ng-model I was missing.

Starscream1984 Over a year ago

no worries :) $parent is easy to forget about in ng-repeat

Vaibhav Pachauri · Accepted Answer · 2015-07-21 11:26:31Z

0

Please use different "name" attribute for all the input fields in being generated using the ng-repeat.

Something like below :

<input type="radio" name="config{{$index}}" ng-model="selectedConfig" ng-value="item.item"> 
    {{ item.item }}
</input>

Please look at the following plnkr : http://plnkr.co/edit/RQQi5Fo9FzM409qKHwjG?p=preview

I hope this will do the trick

edited Jul 21, 2015 at 11:26

answered Jul 16, 2015 at 11:22

Vaibhav Pachauri

2,6712 gold badges21 silver badges34 bronze badges

6 Comments

Alex Over a year ago

The name attribute of the radio buttons decide which ones can be checked together - this would mean that I can check all of the buttons in the intended group? Sorry if I'm not getting something but how would that help?

Vaibhav Pachauri Over a year ago

"ng-model" holds the value of the object which has to be same for all the radio buttons(so only one radio button will be checked and will be assigned the value that is provided in ng-value) whereas when the "name" attribute's value is same then it creates conflicts and thus doesn't bind the value with the model.

Alex Over a year ago

When I tried adding the {{$index}}, it allowed multiple radio buttons to be selected. Also, isn't ng-model referring to the target of the data binding? so in pseudocode: { when radio button is checked } send { ng-value } to {ng-model}

Vaibhav Pachauri Over a year ago

Can you create a fiddle for this ?

Vaibhav Pachauri Over a year ago

Were you able to replicate it in the fiddle or plnkr ? Would be great if you can provide the same. :)

|

Collectives™ on Stack Overflow

AngularJS Radio button not binding

2 Answers 2

4 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related