JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<div data-ng-app="myApp" data-ng-controller="addController">
    <input type="text" data-ng-model="number" placeholder="Number">
    <input type="text" data-ng-model="description" placeholder="Description">
    <input type="text" data-ng-model="assignee" placeholder="Assignee">
        <button data-ng-click="addToList()">add</button>
    <p>There are {{{true: 'a', false:'b'}[list.length]}} items.</p>
    <table data-ng-repeat="item in list" data-ng-if="list">
        <td>{{item.number}}</td>
        <td>{{item.description}}</td>
        <td>{{item.assignee}}</td>
    </table>
</div>

CSS

body {
    font: normal 14px sans-serif;
    padding: 10px;
}
td:nth-child(1) {
    width: 100px;
    text-align: right;
    padding-right: 5px;
}
td:nth-child(2) {
    width: 250px;
}

JavaScript

var app = angular.module("myApp", []);
app.run(function ($rootScope) {
    $rootScope.list = [];
    // $rootScope.list = [{
    //     number: "Story",
    //     description: "Description",
    //     assignee: "Assignee"
    // }];
});
app.controller("addController", function ($scope) {
    function clearEntries() {
        $scope.number = null;
        $scope.description = null;
        $scope.assignee = null;
    }
    
    function checkHeaders() {
        if ($scope.list.length > 0) {
            return;
        }
        $scope.list = [{
            number: "Story",
            description: "Description",
            assignee: "Assignee"
        }];
    }
    
    $scope.addToList = function () {
        checkHeaders();
        var item = {
            number: $scope.number,
            description: $scope.description,
            assignee: $scope.assignee
        };
        if (item.number && item.description) {
            $scope.list.push(item);
        }
        clearEntries();
    };
});