Bind JSON object as radio data in AngularJS

Question

I'm trying to solve bind problem in my application. Similar questions are exists on Stackoverflow, but they do not fully describes my scenario.

I have an radio group created using repeater. Each style value is the Object so I'm using ng-value directive to bind them correct

        <label ng-repeat="style in styles">
            <input type="radio" ng-model="formData.style" ng-value="style">
            {{style.name}}
        </label>

And my controller logic is very simple:

var first = {
   name: "First Name",
   value: "First Value"
};

var second = {
   name: "Second Name",
   value: "Second Value"
};

var third = {
   name: "Third Name",
   value: "Third Value"
};

$scope.styles = [first, second, third];

$scope.formData = {};

//this code works and my screen shows 'second' as selected option
$scope.formData.style = second; 

//this code do not works and my screen do not show 'Second name' as selected
//$scope.formData.style = { 
//       name: "Second Name",
//       value: "Second Value"
//    };

This code works as expected. I'm setting my selection and form shows selected option.

But in my particular example I don't have reference to my second value and I need to take this data from third control, so my updated code will looks like:

$scope.formData.style = {
   name: "Second Name",
   value: "Second Value"
};

And this behavior do not works - I do not see radio selection on my screen.

Here is my fiddle https://jsfiddle.net/vadimb/L7uw3oos/3/

you are initially setting your model $scope.formData.style to an anonymous object which just happens to have the same properties with the same values, but your radio buttons aren't bound to the properties, they are bound to the specific object instances. — Claies
– Claies, Commented Dec 20, 2016 at 16:29
Like Claies has said, the reason here is because you are binding the radio button to the exact property on your model $scope.formData.style which in the first example is set to second which is an item within your $scope.styles array (which you are iterating over to display your radio buttons). You are not binding it to the correct object that is in the $scope.styles array, the items within $scope.styles are their own objects, when you are writing $scope.formData.style = { ... } you are creating a brand new object — Matt Brewerton
– Matt Brewerton, Commented Dec 20, 2016 at 16:35
I can make this code works even with brand new object for combobox, but not for radio. So seems the problem not in this place - re-creating object. — VadimB
– VadimB, Commented Dec 20, 2016 at 16:42

Matt Brewerton · Accepted Answer · 2016-12-20 16:44:37Z

4

The reason here is because you are binding the radio button to the exact property on your model $scope.formData.style which in the first example is set to second which is an item within your $scope.styles array.

When you bind your radio button to a new object:

$scope.formData.style = {
    name: "Second Name",
    value: "Second Value"
};

You are not binding it to the object that is in the $scope.styles array, $scope.formData.style is now it's own completely separate object.

If you want to set it dynamically, you must lookup the item you want from within $scope.styles.

Using Underscore:

$scope.formData.style = _.findWhere($scope.styles, { name: "Second Name"})

Using Pure JS:

function getFromArray(array, value) {
    for(var i = 0; i < array.length; i++) {
        if (array[i].name.toLowerCase() == value.toLowerCase()) {
            return array[i];
        }
    }
}

$scope.formData.style = getFromArray($scope.styles, "Second Name");

Although I'd recommend using some sort of Id instead of a magic string.

answered Dec 20, 2016 at 16:44

Matt Brewerton

8961 gold badge7 silver badges26 bronze badges

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

2 Comments

VadimB Over a year ago

Unfortunately I can iterate through this array, I need something like track by for ng-value directive. Anyway thanks for your attention.

Matt Brewerton Over a year ago

Out of curiosity why are you unable to iterate through the array?

Collectives™ on Stack Overflow

Bind JSON object as radio data in AngularJS

1 Answer 1

Using Underscore:

Using Pure JS:

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Using Underscore:

Using Pure JS:

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related