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/

Answer 1

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.