Question

我有一个购物车webapp，它使用AngularJS添加一行，并在按下“保存”时将整个表保存到本地存储。按钮。我在其他网站上找到了专注于完成此操作的代码（对于addRow部分），但它不适用于我。有人有主意吗？如果您需要AngularJS文件，我也可以添加它。

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>AngularJS Shopping Cart</title>
<script src="js/angular10.js"></script>
<script>
    function CartController($scope) {
        $scope.books =[
            {title: 'Absolute Java',
                qty: 1, price: 114.95},
            {title: 'Pro HTML5',
                qty: 1, price: 27.95},
            {title: 'Head First HTML5',
                qty: 1, price: 27.89}
        ];
        $scope.rows =[
            {title: 'New Book', qty: 1, price: 10.99}
        ];
        $scope.removeBook = function(index) {
            $scope.books.splice(index, 1);
        }
        $scope.addRow = function() {
            $scope.rows.push($scope.rows);
          }
            }
</script>
<link rel="stylesheet" href="css/ex05.css">
</head>
  <body ng-controller="CartController">
    <table>
    <caption><b>My Books</b></caption>
    <thead>
        <tr>
            <th>Title</th>
            <th>Qty</th>
            <th>UnitPrice</th>
            <th>$UnitPrice</th>
            <th>Line Total</th>
            <th>Total </th>
        </tr>
    </thead>
    <tbody ng-repeat="book in books">
        <tr>
            <td>
                <input ng-model="book.title" size="20">
            </td>
            <td>
                <input ng-model="book.qty" size="2">
            </td>
            <td>
                <input ng-model="book.price" size="8">
            </td>
            <td>{{book.price | currency}}</td>
            <td>{{book.price * book.qty | currency}}</td>

            <td>
                <button ng-click="removeBook($index)">
                    Remove
                </button>
            </td>
        </tr>

    </tbody>

</table>
<div id ="update">
    <button id="insert" ng-click="addRow()">
            New
        </button>
    <button id="save" ng-click="save">
            Save
        </button>
    </div>
  </body>
</html>

Answer 1

在添加新行时尝试此操作：

 $scope.addRow = function() {
  $scope.inserted = {
    title: "",
    qty: "",
    price: ""
   };
   $scope.books.push($scope.inserted);
 };

AngularJS addRow并保存

1 个答案: