使用 javascript、angular js 和 html 在动态表格行中自动显示键值

Question

我正在使用 javascript 创建一个 /reducesadds 表行的列表。我很想显示插入后的成本。代码显示表达式名称但未键入值。期望的结果是当用户键入 5 时，考虑到动态输入，它显示 5。我正在使用 javascript 创建一个 /reducesadds 表行的列表。我很想显示插入后的成本。代码显示表达式名称但未键入值。期望的结果是当用户键入 5 时，考虑到动态输入，它显示 5

     <div class="col-sm-12">
       
         <form method="POST">
       <table class="table" id="myTa">
           <thead>
               <tr>
                   
                   <th>Details</th>
                   <th>Quantity</th>
                   <th>Unit cost</th>
                   <th>Total cost</th>
                   
                   
                   
               </tr>
           </thead>
          
       </table>
       
       <br>
       <button class="btn btn-success" onclick="add()" type="button">+ Add</button>
       <button class="btn btn-danger" onclick="remove()" type="button">- Del</button>
       
       <p  id="demo"></p>
       
   <script>
     var n=1;
     var o=1;
   function remove()
   {
       var m = n-2;
       var x = document.getElementById("myTa").rows.length-2;
       var y = document.getElementById("myTa").rows.length-2;
       var g = document.getElementById("myTa").rows.length-2;
       var v = document.getElementById("myTa").rows.length-2;
       var k = document.getElementById("myTa").rows.length-2;
       document.getElementById("myTa").deleteRow(-1);
   document.getElementById("demo").innerHTML = "<input name='total' value='" + x + "' 
  type='number' hidden/>";
   }
     
       function add()
       {
           var x = document.getElementById("myTa").rows.length;
           var y = document.getElementById("myTa").rows.length;
           var g = document.getElementById("myTa").rows.length;
           var v = document.getElementById("myTa").rows.length;
           var k = document.getElementById("myTa").rows.length;
           var kk = document.getElementById("myTa").rows.length;
           var ll = document.getElementById("myTa").rows.length;
           var mm = document.getElementById("myTa").rows.length;
           var nn = document.getElementById("myTa").rows.length;
            var oo = document.getElementById("myTa").rows.length;
           var pp = document.getElementById("myTa").rows.length;
            var qq = document.getElementById("myTa").rows.length;
           
   document.getElementById("demo").innerHTML = "<input name='total' value='" + x + "' 
type='number' hidden/>";
var table = document.getElementById("myTa");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
 var cell2 = row.insertCell(1);
 var cell3 = row.insertCell(2);
 var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);


cell1.innerHTML =  "<textarea class='form-control' name='details"+ v++ +"' required>. 
</textarea>";
cell2.innerHTML =  "<input type='number' class='form-control' data-ng- 
model='quantity"+ oo++ +"'  name='quantity"+ k++ +"' required/>";
cell3.innerHTML =  "<input type='number' class='form-control' name='unit"+ g++ +"' 
required/>";
cell4.innerHTML =  "<p> {{quantity"+ nn++ +"}}</p>";



       }
       
   </script>
   </form>
     </div>  
   </div>
   </div>

我正在使用 javascript 创建一个 /reducesadds 表行的列表。我很想显示插入后的成本。代码显示表达式名称，但未键入值。期望的结果是当用户键入 5 时，考虑到动态输入，它显示 5

Answer 1

事情是这样的：AngularJS 不能以这种方式工作，尝试像这样直接编辑 DOM 可能会导致许多问题。然而，当你学会了这样做的角度方式时，你将永远不会回头。这要容易得多。

本质上，您有一个从数据（数组）生成的视图（表）。添加行或减去行就像从数组中添加或减去行一样简单。这是一个快速演示，展示了一种实现方法，以及获取总数。

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>
    <hr>
    <button class="btn btn-success" ng-click="add()" type="button">+ Add</button>
    <hr>
    <p> Total:  ${{getTotal()}}</p>
  </form>
</div>