未动态添加的项目列表

Question

我在 AngularJS 中编写了这段代码，我想在其中添加商品名称、价格和数量。此项目以低 table 表示并保存为数组。稍后，我正在查找总帐单。

<!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>

请指导我我做错了什么，它不起作用，以及如何收集这个数组作为一个对象保存在数据库中。我不确定如何使用 angular 实现此目的，每当有新指令模板添加到动态视图时如何将对象添加到数组。

提前致谢。

Answer 1

您的代码存在多个问题。

1.Syntax错误：未关闭控制器。

2.Your 控制器是 myCtrl 但你在 angularjs 代码中使用了 OnlineShopping

3.$scope.items 不是 defined.use 这个在控制器里 $scope.items = []

4.you 应该调用 addItem 作为 $scope.addItem

5.Onclick 不适用于 angular 你应该使用 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>

Answer 2

你的代码语法错误太多：我已经为你的代码准备了代码笔 [在此处查看][1]

你错过了闭幕式你错过了一些独家新闻。请查看码笔码这对你有帮助

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

所以你的代码他

<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>

Answer 3

试试这个代码，有很多错误

<!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>

未动态添加的项目列表

List of items not getting added dynamically

javascript

angularjs

angularjs-directive

controller

angularjs-scope