javascript - 使用 ng-repeat 使用特定的 $index 添加表行

Question

在我的要求中，我必须使用 ng-repeat 绑定(bind)/显示在 html 表中，并且还要将行动态添加到特定的点击/索引。我试过了，但无法解决。

<table class="table table-bordered">
  <thead>
    <th>S.No</th>
    <th>Date of Initiation</th>
    <th>Change Control Number</th>
    <th>Manufacturing Unit</th>
    <th>Department</th>
    <th>Product Name</th>
    <th>Title</th>
    <th>Description</th>
    <th>Owner Name</th>
    <th>QA Contact Name</th>
    <th>Product Code</th>
    <th>Status of Progress</th>
    <th>Regulatory Category</th>
    <th>Documents Effected</th>
    <th>Target Closure Date</th>
    <th>Actual Closure Date</th>
    <th>Change Implementation Date</th>
    <th>Comments/Cross References</th>
    <th>Actions</th>
  </thead>
  <tbody>
    <tr id="rowIndex_{{$index}}" ng-repeat="ccms in CCMSResData track by $index">
      <td><input type="text" class="form-control input-sm" data-toggle="tooltip" title="{{ccms.Id}}" value="{{ccms.Id}}"></td>
      <td><input type="text" class="form-control input-sm" data-toggle="tooltip" title="{{ccms.Initiation_Date}}" value="{{ccms.Initiation_Date}}"></td>
      <td><input type="text" class="form-control input-sm" data-toggle="tooltip" title="{{ccms.Change_Control_Number}}" value="{{ccms.Change_Control_Number}}"></td>
      <td><input type="text" class="form-control input-sm" data-toggle="tooltip" title="{{ccms.Manufacturing_Unit}}" value="{{ccms.Manufacturing_Unit}}"></td>
      <td><input type="text" class="form-control input-sm" data-toggle="tooltip" title="{{ccms.Department}}" value="{{ccms.Department}}"></td>
      <td><input type="text" class="form-control input-sm" data-toggle="tooltip" title="{{ccms.Product_Name}}" value="{{ccms.Product_Name}}"></td>
      <td><input type="text" class="form-control input-sm" data-toggle="tooltip" title="{{ccms.Change_Title}}" value="{{ccms.Change_Title}}"></td>
      <td><input type="text" class="form-control input-sm" data-toggle="tooltip" title="{{ccms.Description_Change}}" value="{{ccms.Description_Change}}"></td>
      <td><input type="text" class="form-control input-sm" data-toggle="tooltip" title="{{ccms.Owner_Name}}" value="{{ccms.Owner_Name}}"></td>
      <td><input type="text" class="form-control input-sm" data-toggle="tooltip" title="{{ccms.Qa_Contact_Name}}" value="{{ccms.Qa_Contact_Name}}"></td>
      <td><input type="text" class="form-control input-sm" data-toggle="tooltip" title="{{ccms.Product_Code}}" value="{{ccms.Product_Code}}"></td>
      <td><input type="text" class="form-control input-sm" data-toggle="tooltip" title="{{ccms.Progress_Status}}" value="{{ccms.Progress_Status}}"></td>
      <td><input type="text" class="form-control input-sm" data-toggle="tooltip" title="{{ccms.Reportable_Category}}" value="{{ccms.Reportable_Category}}"></td>
      <td><input type="text" class="form-control input-sm" data-toggle="tooltip" title="{{ccms.Documents_Effected}}" value="{{ccms.Documents_Effected}}"></td>
      <td><input type="text" class="form-control input-sm" data-toggle="tooltip" title="{{ccms.Target_Closure_Date}}" value="{{ccms.Target_Closure_Date}}"></td>
      <td><input type="text" class="form-control input-sm" data-toggle="tooltip" title="{{ccms.Actual_Closure_Date}}" value="{{ccms.Actual_Closure_Date}}"></td>
      <td><input type="text" class="form-control input-sm" data-toggle="tooltip" title="{{ccms.Change_Implementation_Date}}" value="{{ccms.Change_Implementation_Date}}"></td>
      <td><input type="text" class="form-control input-sm" data-toggle="tooltip" title="{{ccms.Comments_Cross_References}}" value="{{ccms.Comments_Cross_References}}"></td>

      <td>
        <i class="fa fa-plus" aria-hidden="true" data-toggle="tooltip" 
           title="Add" ng-click="addCCMSDataClick($index,ccms.Product_Name)"></i>&nbsp;&nbsp;
        <i class="fa fa-trash" aria-hidden="true" data-toggle="tooltip"
           title="Delete"></i>
      </td>
    </tr>
  </tbody>
</table>

cm.addCCMSDataClick = function(index, productName) {
  cm.CCMSResData.push(index, {
    "val": "1"
  })
};

Answer 1

这可能就是您所需要的。您需要在该对象中添加所有缺少的属性。

cm.addCCMSDataClick = function(index, productName) {
  cm.CCMSResData.push({
    "Initiation_Date": "",
    "Change_Control_Number": "",
    .
    .
    .
    "Change_Implementation_Date": "",
    "Comments_Cross_References": ""
  })
};

根据 OP，他想在传入的索引之后立即添加行，即在数组项之间。因此，解决方案是改用 splice。

cm.addCCMSDataClick = function(index, productName) {
  cm.CCMSResData.splice(index, 0, {
    "Initiation_Date": "",
    "Change_Control_Number": "",
    .
    .
    .
    "Change_Implementation_Date": "",
    "Comments_Cross_References": ""
  })
};