Minimal Webix/Ng

by dirkk0

HTML

<script src="http://cdn.webix.io/edge/webix.js"></script>
<link rel="stylesheet" href="http://cdn.webix.io/edge/skins/metro.css">
<div ng-app="myApp">
    <div ng-controller="ContentController">
        <div class="floatingbox list">
            <p>text
                <input ng-model="search.$">
            </p>
            <ul style="list-style: none; padding:0; margin:0;">
                <li ng-repeat="content in contents | orderBy:predicate:reverse | filter:search"> <a href ng-click='setSelectedContent(content)'>
                    [{{$index + 1}}]
                    {{content.name}}
                </a>
                </li>
            </ul>
        </div>
        <div class="floatingbox detail">
             <h3>{{selectedContent.name || "" }}</h3>

            <p>{{selectedContent.datebegin || "" }}</p>
            <p>{{selectedContent.dateend || "" }}</p>
            <p>{{selectedContent.description || "" }}</p>
            
        </div>
    </div>

JavaScript

agenda = [{
    datebegin: "2014-09-17 08:00:00",
    dateend: "2014-09-17 09:30:00",
    name: "ECFI Welcome Breakfast",
    description: "<ul><li>opening speech</li><li>bla bla bla</li></ul>",
    reminder: {
        notify: true,
        date: "2014-09-17 07:45:00",
        label: "ECFI Welcome Breakfast will start at 08:00"
    },
}, {
    datebegin: "2014-09-17 09:45:00",
    dateend: "2014-09-17 12:00:00",
    name: "ECFI Demos",
    description: "Bla bla bla",
    reminder: {
        notify: true,
        date: "2014-09-17 09:30:00",
        label: "ECFI Demos will start in the main hall at 9:45"
    },
}, {
    datebegin: "2014-09-17 10:30:00",
    dateend: "2014-09-17 12:00:00",
    name: "ECFI 99s pitch",
    description: "Bla bla bla",
    reminder: {
        notify: false,
        date: "2014-09-17 10:45:00",
        label: "ECFI Pitches ......."
    },
}]


var myApp = angular.module('myApp', []);
// var app = angular.module('webixApp', ["webix"]);

function ContentController($scope, $http) {


    $scope.contents = agenda;
    $scope.predicate = '-id';

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