CODEWITHSUNDEEP
javascriptangularjsangularjs-directivecontrollerangularjs-scope
Nik
Nik

Reputation: 193

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.

Upvotes: 2

Views: 64

Answers (3)

Dinesh undefined
Dinesh undefined

Reputation: 5546

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>

Upvotes: 2

Sunil
Sunil

Reputation: 138

try this code there are a lots of mistake

<!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="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>
    <h3><span ng-bind="total"></span></h3>
</div>

<script>
var app = angular.module('myApp', []);
app.controller("OnlineShopping", function ($scope) {
var i = 1; $scope.items = [];
$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;
    item.cost = $scope.quantity;
    $scope.addItem(item);
};
$scope.addItem = function (item) {

    $scope.items.push(item)

};
$scope.totalBill = function (items) {
    $scope.total = 0;
    for (var item in items) {
        total += item.cost;
    }
    $scope.total = total;
};
});
</script>

</body>
</html>

Upvotes: 0

Sumit Jaiswal
Sumit Jaiswal

Reputation: 857

So many syntax errors in your code: I've prepared code pen for your code [check here][1]

you missed closing breaket you missed some scooping . please check code pen code this will help you 

[1]: https://codepen.io/sumit-jaiswal/pen/LLdbRV?

so your code he

<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>
<form>
<td><input type = "text" ng-model="name"></td>
<td><input type = "number" ng-model="price"></td>
<td><input type = "number" ng-model="quantity"></td>
</form>
</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>
<h3><span ng-bind="total"></span></h3>
</div>

<script>
var app = angular.module('myApp', []);

app.controller("OnlineShopping", function($scope)
 { 
    var i = 1;
    $scope.items = [];
    $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;

        $scope.addItem(item);
    };
    $scope.addItem = function(item) {
        $scope.items.push(item);
        $scope.item = {};
        $scope.resetForm();
    };
    $scope.totalBill = function(items)          {
        $scope.total = 0;
        for(var item in items) {
            total+=item.cost;
        }
        $scope.total = total;
    }; 

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

Upvotes: 0

Related Questions