AngularJs ng-switch
HTML
<link rel="stylesheet" href="http://onehungrymind.com/angular-dynamic-templates/css/layout.css">
<!doctype html>
<html ng-app="myApp">
<body>
<div id="container" ng-controller="ContentCtrl">
<div ng-repeat="item in content">
<div ng-switch on="item.content_type">
<div ng-switch-when="image" class="entry-photo">
<h2> </h2>
<div class="entry-img">
<span><a href="{{item.data}}"><img ng-src="{{rootDirectory}}{{item.data}}" alt="entry photo"></a></span>
</div>
<div class="entry-text">
<div class="entry-title">{{item.title}}</div>
<div class="entry-copy">{{item.description}}</div>
</div>
</div>
<div ng-switch-when="video" class="entry-video">
<h2> </h2>
<div class="entry-vid">
<iframe ng-src="{{item.data}}" width="280" height="200" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<div class="entry-text">
<div class="entry-title">{{item.title}}</div><div class="entry-copy">{{item.description}}</div>
</div>
</div>
<div ng-switch-when="notes" class="entry-note">
<h2> </h2>
<div class="entry-text">
<div class="entry-title">{{item.title}}</div><div class="entry-copy">{{item.data}}</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
JavaScript
"use strict";
var app = angular.module('myApp', []);
function ContentCtrl($scope) {
$scope.content = [
{
"content_type": "image",
"title": "Image 00",
"data": "http://onehungrymind.com/angular-dynamic-templates/images/temp-photo.jpg"},
{
"content_type": "video",
"title": "Video 00",
"data": "http://player.vimeo.com/video/37176398"},
{
"content_type": "notes",
"title": "Notes 00",
"data": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar pretium felis. Vivamus nibh felis, condimentum sit amet laoreet luctus, posuere auctor lorem. Nullam malesuada."}
];
}