如何从 Object 属性添加值并在 AngularJS 中显示它们

Question

我正在编写一个允许您添加和删除书籍的应用程序。它计算每行书籍的总价值。我正在尝试将 $scope.books.price 内的所有价格相加，但我似乎无法理解如何编写 for 循环。

object 属性是：

标题：
数量：
价格：

我想显示 object 数组中的总价格，并将它们显示在 table header 总计单元格中。

如何遍历 object 来捕获价格并显示在 header 上？

<!doctype html>
<html lang='en' ng-app>
  <head>
   <title>Book Shopping Cart</title>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.7/angular.min.js"></script>
  <script>
    function CartControler($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}
      ];
      // need help with this portion can't seem to get the prices to print out
      $scope.totalPrice = function() {
        for (i=0; i < $scope.books.length; i++) {
          $scope.totalPrice += $scope.books.price[i];
        }
      }

      $scope.addBook = function (index) {
        console.log("add new book");
        $scope.books.push({title: 'New Book', qty: 1, price: 10.99});
      }

      $scope.removeBook = function(index) {
        $scope.books.splice(index, 1);
      }

    }
  </script>
  <link rel="stylesheet" href="css/ex05.css">
  </head>

  <body ng-controller="CartControler">

    <table>
      <caption><b>My Books</b></caption>
      <thead>
        <tr>
            <th>Title</th>
            <th>Qty</th>
            <th>UnitPrice</th>
            <th>Line Total</th>
            <th>Total {{totalPrice | currency}}</th> <!--I would like to display overall total here-->
        </tr>
      </thead>
      <tbody >
        <tr ng-repeat="book in books">
            <td><input ng-model="book.title"></td>
            <td>
                <input ng-model="book.qty" size="2">
            </td>
            <td>
                <input ng-model="book.price" >
            </td>
            <td>{{book.price * book.qty | currency}}</td>
            <td>
                <button ng-click="removeBook($index)">
                    Remove
                </button>
            </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>
            <button ng-click="addBook($index)">New</button>
          </th>
          <th></th>
          <th></th>
          <th>
            <button ng-click="">Save</button>
          </th>
          <th></th>

        </tr>
      </tfoot>
    </table>
  </body>
</html>

Answer 1

使用当前图书价格初始化$scope.totalPrice（不需要它是一个函数），然后使用addBook和removeBook函数来更新$scope.totalPrice。

编辑：

由于$scope.totalPrice会受到多方面的影响，不仅仅是添加和删除图书，还会更改图书的数量和价格，因此有必要在多个地方执行更新代码。像这样：

function CartControler($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.addBook = function (index) {
        const newBook = {title: 'New Book', qty: 1, price: 10.99};
        $scope.books.push(newBook);
        $scope.totalPrice += newBook.price  * newBook.qty;
      }

      $scope.removeBook = function(index) {
        const bookToRemove = $scope.books[index];
        $scope.books.splice(index, 1);
        $scope.totalPrice -= bookToRemove.price * bookToRemove.qty;
      }
      
      $scope.updateTotal = function() {
        $scope.totalPrice = 0;
        for (i=0; i < $scope.books.length; i++) {
            $scope.totalPrice += ($scope.books[i].price * $scope.books[i].qty);
        }
     }
     
           $scope.updateTotal()

    }

<!doctype html>
<html lang='en' ng-app>
  <head>
   <title>Book Shopping Cart</title>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.7/angular.min.js"></script>

  <link rel="stylesheet" href="css/ex05.css">
  </head>

  <body ng-controller="CartControler">

    <table>
      <caption><b>My Books</b></caption>
      <thead>
        <tr>
            <th>Title</th>
            <th>Qty</th>
            <th>UnitPrice</th>
            <th>Line Total</th>
            <th>Total {{totalPrice | currency}}</th> <!--I would like to display overall total here-->
        </tr>
      </thead>
      <tbody >
        <tr ng-repeat="book in books">
            <td><input ng-model="book.title"></td>
            <td>
                <input ng-model="book.qty" size="2" ng-change="updateTotal()">
            </td>
            <td>
                <input ng-model="book.price" ng-change="updateTotal()">
            </td>
            <td>{{book.price * book.qty | currency}}</td>
            <td>
                <button ng-click="removeBook($index)">
                    Remove
                </button>
            </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>
            <button ng-click="addBook($index)">New</button>
          </th>
          <th></th>
          <th></th>
          <th>
            <button ng-click="">Save</button>
          </th>
          <th></th>

        </tr>
      </tfoot>
    </table>
  </body>
</html>

如何从 Object 属性添加值并在 AngularJS 中显示它们

How to add values from an Object Attributes and display them in AngularJS

javascript

for-loop

function

angularjs

ng-app