JSFiddle - React, Tailwind, and code Playground

by Taras Romanyk

HTML

<script src="https://code.angularjs.org/angular-1.0.1.js"></script>
    <div id="MyApp" ng-controller="mainController">
        <div id="AddItem">
             <h3>Add Item</h3>
            <input value="1" type="number" placeholder="1" ng-model="itemAmount">
            <input value="" type="text" placeholder="Name of Item" ng-model="itemName">
            <br/>
            <button ng-click="addItem()">Add to list</button>
        </div>
        <div id="UncheckedList">
             <h4>Unchecked:</h4>
            <table>
                <tr ng-repeat="item in items" class="item-unchecked">
                    <td><b>amount:</b> {{item.amount}} -</td>
                    <td><b>name:</b> {{item.name}} -</td>
                    <td>
                        <button ng-click="removeItem($index)">check item</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>

JavaScript

var app = angular.module("MyApp", []);

app.controller("mainController", function ($scope) {
    $scope.items = [];
    $scope.addItem = function () {
        $scope.items.push({
            amount: $scope.itemAmount,
            name: $scope.itemName
        });
        $scope.itemAmount = "";
        $scope.itemName = "";
    };
    $scope.removeItem = function (index) {
        $scope.items.splice(index, 1);
    };
});