Adding url and alt attributes dynamically with radio buttons in Angularjs

Question

So I have a group of radio buttons that are built dynamically using a JSON file. The JSON file contains things like url (of an image), alt text, etc...

I have it working pretty well, and can change the value of the img src based on the value of the radio button selected. However, what if I need to access other elements of the json object as well so that I can set the alt text of the image depending on the element selected.

Here is a plunkr of the basic functionality as I have it to this point...

http://plnkr.co/edit/bI4ggTNCPSq3o1Bt6gqg?p=preview

The JSON object looks like so:

{
    "header_images" : [
        {
            "id" : "havoc-header",
            "alt" : "Some alt text",
            "fname" : "admissions-general-havoc-header.jpg",
            "url" : "email-assets/header-images/admissions-general-havoc-header.jpg"
        },
        {
            "id" : "cob-header",
            "alt" : "Some more alt text",
            "fname" : "cob-banner.jpg",
            "url" : "email-assets/header-images/cob-banner.jpg"
        },
        {
            "id" : "css-header",
            "alt" : "still some more alt text",
            "fname" : "css-banner.jpg",
            "url" : "email-assets/header-images/css-banner.jpg"
        },
        {
            "id" : "huns-header",
            "alt" : "one more alt-text",
            "fname" : "huns-banner.jpg",
            "url" : "email-assets/header-images/huns-banner.jpg"
        }
    ]
}

The radio buttons are being built in the view like so:

<label ng-repeat="header in assets.header_images">
    <input type="radio" ng-model="assets.headerimage" value="{{header.url}}" id="{{header.id}}" data-alt="{{header.alt}}" />
    {{header.url}}
</label>

And my controller looks like this:

function MainCtrl($scope, $http) {
    $http.get('js/assets.json').then(function(res){
        $scope.assets = res.data;
    });
}

So basically when a radio button is clicked, I would like to populate this which is outside of the ng-repeat:

 <img src="{{assets.headerimage}}" alt="{{alt}}" />

The src attribute is easy enough. I have that working fine...As you can see when one of the dynamic radio buttons are checked, the value is added to the assets.headerimage binding. But, how would I set the appropriate alt text?

I am sure this is really easy, but I can't get my head around it for some reason. I am relatively new to angularjs, so be gentle :D

Answer 1

in your radio ng-model, you are assigning header.url to the model, so you cant access the alt. but instead if you assign the header to the model you will be able to access the alt.

<label ng-repeat="header in assets.header_images">
     <input type="radio" ng-model="assets.headerimage" value="{{header}}" id="{{header.id}}" data-alt="{{header.alt}}" />
</label>

 <img ng-src="{{assets.headerimage.url}}" alt="{{assets.headerimage.alt}}"/>