JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<div ng-app="angularTable">
  <h2>Todo</h2>
  <div ng-controller="listdata as listdata">
    <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span>
    [ <a href="" ng-click="todoList.archive()">archive</a> ]
    <ul class="unstyled">
      <li ng-repeat="todo in todoList.todos">
        <input type="checkbox" ng-model="todo.done">
        <span class="done-{{todo.done}}">{{todo.text}}</span>
      </li>
    </ul>
    <form ng-submit="todoList.addTodo()">
      <input type="text" ng-model="todoList.todoText"  size="30"
             placeholder="add new todo here">
      <input class="btn-primary" type="submit" value="add">
    </form>
  </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<style>
.done-true {
  text-decoration: line-through;
  color: grey;
}

JavaScript

var app = angular.module('angularTable', []);
app.controller('listdata', function ($scope, $http) {
    $scope.users = []; //declare an empty array
    $http.get("https://dl.dropboxusercontent.com/u/94145612/example.json").success(function (response) {
        $scope.users = response;  //ajax request to fetch data into $scope.data
    });
});