JSFiddle - React, Tailwind, and code Playground

by beltiste

HTML

<div ng-controller="EventTopicCtrl">
    <select ng-model="topic" ng-options="t.key as t.doc._id  for t in event_topic.rows"></select>
    <br>Currently selected: {{ {selected:topic.key} }}</div>
<div ng-controller="EventCtrl">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>CAS ID</th>
                <th>All</th>
                <th>By</th>
                <th>All</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in events.rows">
                <td class="span2"></td>
                <td class="span9">{{ row }}</td>
            </tr>
        </tbody>
    </table>
    <li><a ng-click="prevClick()" ng-show="events.prevRows.length">Newer</a>

    </li>
    <li><a ng-click="nextClick()" ng-show="events.nextRow">Older</a>

    </li>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> <link href="//code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet"> <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> <script src="//raw.github.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-0.3.0.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular-resource.js"></script> <style>

JavaScript

angular.module('EventsApp', ['CornerCouch'], function(){
    console.log('Event form running!');

    // $.noty.defaults.layout = 'bottomRight';
    // $.noty.defaults.timeout = 2000; // DEFAULT 2s TIMEOUT FOR NOTIES
});


function EventCtrl($scope, $filter, cornercouch) {
    $scope.uid = 319473;
    $scope.server = cornercouch("/couchdb", "GET");
    $scope.events = $scope.server.getDB("events");
    $scope.events.query("event", "by_uid", { key: $scope.uid, include_docs: true, ascending: true, limit: 5 });

    // $scope.rowClick = function(idx) { $scope.detail = $scope.events.getQueryDoc(idx); };

    $scope.nextClick = function() { $scope.events.queryNext() };
    $scope.prevClick = function() { $scope.events.queryPrev() };
}

function EventTopicCtrl($scope, $filter, cornercouch) {
    $scope.server = cornercouch("/couchdb", "GET");
    $scope.event_topic = $scope.server.getDB("events");
    $scope.event_topic.query("event_topic", "by_name", { include_docs: true, ascending: true });

    $scope.detail = $scope.event_topic.newDoc();

}