未动态添加的项目列表答案

【问题标题】：List of items not getting added dynamically未动态添加的项目列表
【发布时间】：2017-07-01 13:38:43
【问题描述】：

我在 AngularJS 中编写了这段代码，我想在其中添加商品名称、价格和数量。该项目在下表中表示并保存为数组。后来，我找到了总帐单。

<!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 来实现这一点，每当有一个新的指令模板添加到动态视图时，如何将对象添加到数组中。

提前致谢。

【问题讨论】：

标签： javascript angularjs angularjs-directive controller angularjs-scope

【解决方案1】：

您的代码存在多个问题。

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

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

3.$scope.items 未定义。在控制器$scope.items = [] 中使用它

4.你应该调用 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>

【讨论】：

除了总账单部分外，您的代码运行良好，非常感谢您的帮助并指出我的错误，以便我参考。 :)
接受:)。谢谢:)

【解决方案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>

【讨论】：

先生，添加到购物车按钮在您的代码中不起作用。但是，我喜欢重置部分，并且已经使用了该功能。感谢您的帮助。
Nik 我认为它工作正常，好吧，如果您需要任何帮助，请告诉我 :)

【解决方案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>

【讨论】：

您的代码运行良好，但有一行是额外的 item.cost = $scope.quantity;。感谢您的帮助。