Question

我已在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>

请指导我做错了它不能正常工作，以及如何将此数组作为保存在DB中的对象收集。我不知道如何通过angular实现这一点，无论何时添加一个新的指令模板动态查看，如何将对象添加到数组中。

提前致谢。

Answer 1

您的代码存在多个问题。

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

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

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

中使用此功能

4.您应该将addItem称为$scope.addItem

5. Onclick无法使用角度，您应该使用ng-click

＆＃13;

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

＆＃13;

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>

未动态添加的项目列表

3 个答案: