JSFiddle - React, Tailwind, and code Playground

by gorebash

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.3/jquery.dataTables.min.js"></script>
<div ng-app>
    <h1>Results Table</h1>
    <div class="assign table-bordered table-striped" ng-controller="AssignmentCtrl">
        <table class="assign-list">
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Points</th>
                    <th>Due</th>
                    <th>Completed</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="assign in list()">
                    <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

function AssignmentCtrl($scope, $http) {

    var _assignments = [];

    $scope.add = function () {
        _assignments.push({ title: $scope.title, points: $scope.points });
    };

    $scope.total = function () {
        return _assignments.length;
    };

    $scope.list = function () {
        return _assignments;
    };

    $scope.fetch = function () {
        // normally I'd run the service here: $http.get....
        // but just skip it for this test:
        $scope.assignmentsLoaded();
    };

    $scope.assignmentsLoaded = function (data, status) {
        // mock data
        _assignments = [
            {
                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
            }];
        
       
            
        /* ISSUE HERE -- 
            I need to run this plugin against the table of results AFTER Angular renders the template and updates the DOM.  If I run this plugin here, it apparently executes too soon, and the DOM has not been updated from Angular yet, so its trying to run the plugin against the template, not the rendered html. 
        
        How do I fix this?
*/        
        $(".assign-list").dataTable();
    }

    $scope.fetch();
}