AngularJS with content from Cloud9

http://angularjs.org/

by dirkk0

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" </p>
            <ul>
                <li ng-repeat="content in contents | filter:search"> <a href ng-click='setSelectedContent(content)'>{{content.title}}</a>
                </li>
                </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 myUrl = 'http://nodetest2.dirkk0.c9.io/contents';

var myApp = angular.module('myApp', []);

// see http://goo.gl/fKgFe
myApp.config(['$httpProvider', function($httpProvider) {
  
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common['X-Requested-With'];
  }]);

function ContentController($scope, $http) {
    $http.get(myUrl).success(function (data) {
        console.log(data.contents[1]);
        // $scope.contents = data;
        $scope.contents = data.contents;
    });

    $scope.setSelectedContent = function (content) {
        $scope.selectedContent = content;
    };

}