Как добавить значения из атрибутов объекта и отобразить их в AngularJS - PullRequest
Новая
       11

Как добавить значения из атрибутов объекта и отобразить их в AngularJS

0 голосов
/ 06 апреля 2020

Я пишу приложение, где оно позволяет добавлять и удалять книги. Он рассчитывает общую стоимость книги в строке. Я пытаюсь сложить все цены в $ scope.books.price, но я не могу понять, как написать для l oop.

Атрибуты объекта :

  • title:
  • Кол-во:
  • цена:

Я хотел бы показать общую сумму цен из массив объектов и отображать их в итоговой ячейке заголовка таблицы.

Как можно перебрать объект, чтобы зафиксировать цены и отобразить в заголовке? 

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

1 Ответ

0 голосов
/ 06 апреля 2020

Инициализируйте $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>
...