AngularJS with content.json
http://angularjs.org/
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="ContentController">
<div class="floatingbox list">
<p>text
<input ng-model="search.$">tags
<input ng-model="search.tags" >
<ul>
<li ng-repeat="content in contents | filter:search"> <a href ng-click='setSelectedContent(content)'>{{content.title}}</a>
</li>
</ul>
</div>
<div class="floatingbox detail">
<p>{{selectedContent.title}}</p>
<p>{{selectedContent.text}}</p>
<p><a href="{{selectedContent.link}}" target=_new>{{selectedContent.link}}</a>
</p>
<!-- div class="wrap">
<iframe class="frame" src="((selectedContent.f_link))">
</iframe>
</div -->
<p><img src="http://api.qrserver.com/v1/create-qr-code/?data=((selectedContent.f_link))&size=100x100"></p>
</div>
</div>
CSS
body {
font: 8pt Helvetica,Arial;
width:800px;
background: #333;
}
input {
font-size: 10pt;
}
.sectiontitle {
color:red;
text-align: right;
width:100%;
}
.inputfield {
color:red;
}
.floatingbox {
float:left;
border: 1px solid #333;
background-color: #fff;
margin:5px;
padding:5px;
}
.list {
width:200px;
}
.detail {
width:475px;
}
.detailimagewrapper {
text-align: center;
}
.detailimage {
box-shadow: 5px 5px 5px #888888;
}
.wrap { width: 320px; height: 196px; }
.frame {
width: 1280px; height: 786px; border: 1px solid black
// zoom: 0.25;
-moz-transform: scale(0.25);
-moz-transform-origin: 0 0;
-o-transform: scale(0.25);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.25);
-webkit-transform-origin: 0 0;
}
JavaScript
/*
var myApp = angular.module('myApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('((');
$interpolateProvider.endSymbol('))');
});
*/
var myApp = angular.module('myApp', []);
function ContentController($scope, $http) {
$http.get('https://dl.dropboxusercontent.com/u/728316/content.json').success(function (data) {
// console.log(data);
$scope.contents = data;
});
$scope.setSelectedContent = function (content) {
$scope.selectedContent = content;
};
}