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...

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

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

• javascript
• json
• angularjs

3 Answers 3

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}}"/>

Add ng-change event in the input. Assume the alt is in the parent scope, and then you can use $parent to access alt

<input type="radio" ng-model="assets.headerimage" ng-change="$parent.alt = header.alt" ... >

I'll start with a side-note, you should use ng-src (link) for populating source of an image. This way your browser will not hit 404s after request wrong URLs like /{{assets.headerimage}}.

Now, regarding your question. Assuming your id is unique, you could re-work your JSON to a form similar to this:

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

then change value="{{header.url}}" of each of your checkboxes to value="{{header.id}}", and finally populate your image like this:

<img ng-src="{{ assets.header_images[assets.headerimage].url }}"/>

Another way does not require modifying the JSON structure, but it still involves using header.id as your model's value. Simply add a function like this to your scope:

$scope.getChosenHeader = function() {
    for(var i=0;i<$scope.header_images.length;i++) {
        var h = $scope.header_images[i];
        if(h.id === $scope.assets.headerimage) {
            return h;
        }
    }
}

and then populate your image like this:

<img ng-src="{{ getChosenHeader().url }}"/>

This way you can access the whole object instead of just url property. Of course remember to only show your <img/> tag if getChosenHeader().url is not undefined