“Valeur des clés d'affichage automatique dans une ligne de table dynamique en utilisant JavaScript, Angular JS et HTML” Réponses codées

Valeur des clés d'affichage automatique dans une ligne de table dynamique en utilisant JavaScript, Angular JS et HTML

angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
    $scope.tableData = [{
        details: "Here are some details...",
        quantity: 5,
        unit_cost: 14.99
      },
      {
        details: "Here are some details2...",
        quantity: 2,
        unit_cost: 4.99
      },
      {
        details: "Here are some details3...",
        quantity: 1,
        unit_cost: 44.99
      },
      {
        details: "Here are some details4...",
        quantity: 0,
        unit_cost: 104.99
      }
    ];

    $scope.getTotal = function() {
      return $scope.tableData.reduce((b, a) => {
        b += a.unit_cost * a.quantity;
        return b;
      }, 0).toFixed(2)
    }

    $scope.add = function() {
      let blankRow = {
        details: "",
        quantity: "",
        unit_cost: ""
      }
      $scope.tableData.push(blankRow)
    };


    $scope.remove = function(index) {
      $scope.tableData.splice(index, 1);
    };


  }]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <form method="POST">
    <table class="table">
      <thead>
        <tr>
          <th>Details</th>
          <th>Quantity</th>
          <th>Unit cost</th>
          <th>Total cost</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat='i in tableData'>
          <td>
            <textarea class='form-control' ng-model="i.details" name="details_{{$index}}" required></textarea>
          </td>
          <td>
            <input type='number' name="quantity_{{$index}}"  class='form-control' ng-model='i.quantity' required/>
          </td>

          <td>
            <input type='number' name="unit_cost_{{$index}}"  class='form-control' ng-model='i.unit_cost' required/>
          </td>

          <td>
            ${{(i.unit_cost * i.quantity).toFixed(2)}}
          </td>
          <td>
            <button class="btn btn-danger" ng-click="remove($index)" type="button">- Del</button>
          </td>
        </tr>
      </tbody>
    </table>