JSFiddle - React, Tailwind, and code Playground

by gavinfoley

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.3/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/css/jquery.dataTables.css">
<div ng-controller="AssignmentCtrl">
    <a ng-click="modifyData()">remove row of data</a>
    <h1>Results Table</h1>
    <div class="assign table-bordered table-striped" >
        <table class="assign-list" jq-table>
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Points</th>
                    <th>Due</th>
                    <th>Completed</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="assign in assignments">
                    <td>{{assign.title}}</td>
                    <td>{{assign.points}}</td>
                    <td>{{assign.due}}</td>
                    <td>{{assign.completed}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<style>
.done-true {
  text-decoration: line-through;
  color: grey;
}

JavaScript

//http://stackoverflow.com/questions/12304291/angularjs-how-to-run-additional-code-after-angularjs-has-rendered-a-template/13619324#13619324


var test = angular.module("Test", []);
test.directive("jqTable", function() {
    return function(scope, element, attrs) {
        scope.$watch("assignments", function() {
            element.dataTable();
        });
    };
});

function AssignmentCtrl($scope, $http, $timeout) {
    $scope.assignments = [];
    $scope.fetch = function() {
        // -- Mock server data..
        var data = [{
            id: 1,
            title: "Math 1",
            points: 20,
            due: "",
            completed: true},
        {
            id: 2,
            title: "Math 2",
            points: 40,
            due: "",
            completed: true},
        {
            id: 3,
            title: "Math 3",
            points: 20,
            due: "",
            completed: false}];
        $scope.$evalAsync($scope.assignmentsLoaded(data));
        // -- This also works, since it does not have an async call:
        //$scope.assignmentsLoaded(data);             
    };
    $scope.assignmentsLoaded = function(data, status) {
        $scope.assignments = data;
    }
    $scope.modifyData = function() {
        $scope.assignments.pop();
    }
    $scope.fetch();
}