CODEWITHSUNDEEP
jqueryangularjs
rsonx
rsonx

Reputation: 456

How to dynamically insert non identical templates in angular template?

Let's say I have a client side which would receive a json from a node server. The json would contain an array of information about number and type of media to be displayed.

{"feed":{"data":[         
    {"id":"1","type":"image",
     "image1":"image1Url",
     "image2":"image2Url"
    }, 
    {"id":"2","type":"mixed",
     "image1":"image1Url",
     "video1":"video1Url",
     "image2":"image2Url"
    },
    {"id":"3","type":"message",
     "message1":"Hello",
     "message2":"Qwerty"
    }
]}}

The client side depending upon the information would populate an html div and then append it to a parent component.

For example,

For id 1 the div template would contain 2 images.

For id 2 the div template would contain an image, a video and again an image.

For id 3 the div template would contain two text fields.

All the div templates would be then appended to the hosting component.

I could dynamically create the html and append them to the host using jQuery.

with writing a function like this.

function populateAttachmentCard(i,platform,type,message,dateStamp,name,imageSrc,finalListElement){
    var attachmentFragment='';
    if(finalListElement.attachments.data[0].subattachments){
        subAttachmentLength= finalListElement.attachments.data[0].subattachments.data.length;
        for(var j=0; j<subAttachmentLength; j++){
            var attachmentType = finalListElement.attachments.data[0].subattachments.data[j].type;
            if(attachmentType=='photo' || attachmentType=='image'){
                var imageSrc= finalListElement.attachments.data[0].subattachments.data[j].media.image.src; 
                attachmentFragment= attachmentFragment + '<img src='+imageSrc+' class="card-img-top" alt="images/picture.svg" height="auto" width="300px" style="padding-top: 10px">';
            }
            else if(attachmentType=='video'){
                var mediaSrc= finalListElement.attachments.data[0].subattachments.data[j].media.source;
                attachmentFragment= attachmentFragment + '<video class="card-img-top" alt="images/picture.svg" height="auto" width="auto" style="padding-top: 10px" controls>'+
                    '<source src='+mediaSrc+' type="video/mp4">'+               
                '</video>';
            }
        }
        console.log('attachmentFragment:', attachmentFragment);
    }else if(finalListElement.attachments){
        var attachmentType = finalListElement.attachments.data[0].media_type;
        if(attachmentType=='photo' || attachmentType=='image'){
            var imageSrc= finalListElement.attachments.data[0].media.image.src; 
            attachmentFragment= attachmentFragment + '<img src='+imageSrc+' class="card-img-top" alt="images/picture.svg" height="auto" width="300px" style="padding-top: 10px">';
        }
        else if(attachmentType=='video'){
            var mediaSrc= finalListElement.attachments.data[0].media.source;
            attachmentFragment= attachmentFragment + '<video class="card-img-top" alt="images/picture.svg" height="auto" width="auto" style="padding-top: 10px" controls>'+
                '<source src='+mediaSrc+' type="video/mp4">'+                   
            '</video>';
        }
        else if(attachmentType=='link'){
            var mediaSrc= finalListElement.attachments.data[0].media.source;
            attachmentFragment= attachmentFragment + '<video class="card-img-top" alt="images/picture.svg" height="auto" width="auto" style="padding-top: 10px" controls>'+
                '<source src='+mediaSrc+' type="video/mp4">'+                   
            '</video>';
        }
    }

    $('#content').append(
        '<div class="card w-50" style="width: 18rem;">'+
            '<div class="card-header">'+
                i+'. '+platform+', '+type+
            '</div>'+
            //'<img src='+imageSrc+' class="card-img-top" alt="images/picture.svg" height="auto" width="300px" style="padding-top: 10px">'+
            attachmentFragment+  
            '<div class="card-body">'+
                '<p class="card-text">'+
                    message+
                '</p>'+
                '<blockquote class="blockquote mb-0">'+
                    '<footer class="blockquote-footer">'+
                        dateStamp+', '+
                        '<cite title="Source Title">'+
                            name+
                        '</cite>'+
                    '</footer>'+
                '</blockquote>'+
            '</div>'+
        '</div>'
    )
}

However I am using angularjs and from my controller jQuery does not seems to be working. I was looking at dynamic component loader tutorial for angular but it appears that only a static template could be used.

Assume that I am very beginner in angularjs and web development.

Upvotes: 0

Views: 53

Answers (1)

georgeawg
georgeawg

Reputation: 48968

Use the ng-switch directive.

<div ng-repeat="item in feed.data">
    <div ng-switch="item.type">
        <div ng-switch-when="image">
            <img src="{{item.image1}}" />
            <!-- ... -->
        </div>
        <div ng-switch-when="mixed">
            <!-- ... -->
        </div>            
        <div ng-switch-when="message">
            <!-- ... -->
        </div>
        <div ng-switch-default>
            <!-- ... -->
        </div>
    </div>
</div>

For more information, see

Upvotes: 0

Related Questions