Q:

List of items not getting added dynamically

I have written this code in AngularJS where I want to add item name, price and quantity. This item is represented in lower table and saved as an array. Later, I am finding the total bill.
<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <body>

        <p>Try to add the items.</p>

        <div ng-app="myApp" ng-controller="myCtrl">

            <table border="1">
                <tr>
                    <td>Item</td>
                    <td>Price</td>
                    <td>Quantity
                </tr>  
                <tr>
                    <form>
                    <td><input type = "text" ng-model="name"></td>
                    <td><input type = "text" ng-model="price"></td>
                    <td><input type = "text" ng-model="quantity"></td>
                    </form>
                </tr>
            </table>
            <br>
            <button onClick="createItem()">Add to Cart</button>

            <h2>My Cart</h2>
            <div style="border: 1px solid blue;">
        </div>
        <table border="1" class="mytable">
            <tr>
                <td>S.No.</td>  
                <td>Item</td>
                <td>Price</td>
                <td>Quantity</td>
                <td>Cost</td>
            </tr>
            <tr ng-repeat="item in items">
                <td><span ng-bind="item.serial"></span></td>
                <td><span ng-bind="item.name"></span></td>
                <td><span ng-bind="item.price"></span></td>
                <td><span ng-bind="item.quantity"></span></td>
                <td><span ng-bind="item.cost"></span></td>
            </tr>
        </table>

        <br>
        <h3><span ng-bind="total"></span></h3>
    </div>

    <script>
    var app = angular.module('myApp', []);
    app.controller("OnlineShopping", function($scope)
    { 
        var i = 1;
        $scope.createItem = function($scope) {
            var item = {};
            item.serial = i++;
            item.name = $scope.name;
            item.price = $scope.price;
            item.quantity = $scope.quantity; 
            item.cost = $scope.price * $scope.quantity;
            item.cost = $scope.quantity;
            addItem(item);
        };
        $scope.addItem = function(item) {
            $scope.items.push(item);
            $scope.item = {};
        };
        $scope.totalBill = function(items) {
            $scope.total = 0;
            for(var item in items) {
                total+=item.cost;
            }
            $scope.total = total;
        };    
    </script>

    </body>
</html>

Please guide me what I am doing wrong that it's not working, and how to collect this array as an object to save in DB. I am not sure how can I achieve this with angular, how to add object to array whenever there is a new directive template added to view dynamically.
Thanks in advance.

A:

There are multiple issues with your code.
1.Syntax error: not closed controller.
2.Your controller is myCtrl but you used OnlineShopping in angularjs code
3.$scope.items is not defined.use this in controller $scope.items = []
4.you should call addItem as $scope.addItem
5.Onclick will not work with angular you should use ng-click

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<p>Try to add the items.</p>

<div ng-app="myApp" ng-controller="OnlineShopping">


    <table border="1">
        <tr>
            <td>Item</td>
            <td>Price</td>
            <td>Quantity
        </tr>

        <tr>
            <td><input type="text" ng-model="name"></td>
            <td><input type="text" ng-model="price"></td>
            <td><input type="text" ng-model="quantity"></td>

        </tr>
    </table>
    <br>
    <button ng-click="createItem()">Add to Cart</button>

    <h2>My Cart</h2>
    <div style="border: 1px solid blue;">
    </div>
    <table border="1" class="mytable">
        <tr>
            <td>S.No.</td>
            <td>Item</td>
            <td>Price</td>
            <td>Quantity</td>
            <td>Cost</td>
        </tr>
        <tr ng-repeat="item in items">
            <td><span ng-bind="item.serial"></span></td>
            <td><span ng-bind="item.name"></span></td>
            <td><span ng-bind="item.price"></span></td>
            <td><span ng-bind="item.quantity"></span></td>
            <td><span ng-bind="item.cost"></span></td>
        </tr>
    </table>

    <br>
    <br>
    <h3>Total : <span ng-bind="total"></span></h3>
</div>

<script>
var app = angular.module('myApp', []);
app.controller("OnlineShopping", function ($scope) {
var i = 1; $scope.items = [];$scope.total = 0;
$scope.createItem = function () {
    var item = {};
    item.serial = i++;
    item.name = $scope.name;
    item.price = $scope.price;
    item.quantity = $scope.quantity;
    item.cost = ($scope.price * $scope.quantity).toFixed(2);;
    $scope.addItem(item);
};
$scope.addItem = function (item) {

    $scope.items.push(item);
    $scope.item = {};
    $scope.resetForm();
    $scope.totalBill($scope.items);

};
$scope.totalBill = function (items) {
    var total = 0;
    for(var i = 0; i < $scope.items.length; i++){
        var item = $scope.items[i];
        total += (item.quantity*item.price);
    }
    $scope.total = total;
};

$scope.resetForm = function(){
        $scope.name = '';
        $scope.price = '';
        $scope.quantity = ''; 
  }
});
</script>

