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, Jul 16 '15 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, Jul 16 '15 at 11:04

Starscream1984 · Accepted Answer · 2015-07-16T12:30:47.353

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 '15 at 12:30

answered Jul 16 '15 at 11:18

Starscream1984

3,072
1
19
27

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 Jul 16 '15 at 11:24
It is referring to the first property of the items - would that be an issue? – Alex Jul 16 '15 at 11:31
Literally solved it at the same time - thank you! It was the $parent in ng-model I was missing. – Alex Jul 16 '15 at 12:37
no worries :) $parent is easy to forget about in ng-repeat – Starscream1984 Jul 16 '15 at 12:39

Vaibhav Pachauri · Answer 2 · 2015-07-21T11:26:31.620

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 '15 at 11:26

answered Jul 16 '15 at 11:22

Vaibhav Pachauri

2,671
2
19
32

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? – Alex Jul 16 '15 at 11:27
"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. – Vaibhav Pachauri Jul 16 '15 at 11:33
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} – Alex Jul 16 '15 at 11:35
Can you create a fiddle for this ? – Vaibhav Pachauri Jul 16 '15 at 11:37
Were you able to replicate it in the fiddle or plnkr ? Would be great if you can provide the same. :) – Vaibhav Pachauri Jul 16 '15 at 11:44
Little late though :) And yes ng-repeat creates its own child scope and it follows the prototypical inheritance. So to access an object outside the scope of ng-repeat, you need to have an object with '.' notation. For more information please look at this topic please follow the link : http://stackoverflow.com/questions/12977894/what-is-the-angularjs-way-to-databind-many-inputs/13782671#13782671 – Vaibhav Pachauri Jul 16 '15 at 12:44

AngularJS Radio button not binding

2 Answers2