Angular Add & Push Array

by Zuhaib Siddiqui

HTML

<div ng-app="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>
        <!-- begin: LIST OF CHECKED ITEMS -->
        <div id="CheckedList">
             <h3>Checked Items: {{getTotalCheckedItems()}}</h3>

             <h4>Checked:</h4>

            <table>
                <tr ng-repeat="item in checked" class="item-checked">
                    <td><b>amount:</b> {{item.amount}} -</td>
                    <td><b>name:</b> {{item.name}} -</td>
                    <td> <i>this item is checked!</i>

                    </td>
                </tr>
            </table>
        </div>
        <!-- end: LIST OF CHECKED ITEMS -->
        <!-- begin: LIST OF UNCHECKED ITEMS -->
        <div id="UncheckedList">
             <h3>Unchecked Items: {{getTotalItems()}}</h3>

             <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="toggleChecked($index)">check item</button>
                    </td>
                </tr>
            </table>
        </div>
        <!-- end: LIST OF ITEMS -->
            </div>

JavaScript

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

app.controller("mainController",

function ($scope) {

    // Item List Arrays
    $scope.items = [];
    $scope.checked = [];

    // Add a Item to the list
    $scope.addItem = function () {

        $scope.items.push({
            amount: $scope.itemAmount,
            name: $scope.itemName
        });

        // Clear input fields after push
        $scope.itemAmount = "";
        $scope.itemName = "";

    };

    // Add Item to Checked List and delete from Unchecked List
    $scope.toggleChecked = function (index) {
        $scope.checked.push($scope.items[index]);
        $scope.items.splice(index, 1);
    };

    // Get Total Items
    $scope.getTotalItems = function () {
        return $scope.items.length;
    };

    // Get Total Checked Items
    $scope.getTotalCheckedItems = function () {
        return $scope.checked.length;
    };
});