добавить строку таблицы с помощью специального $ index с помощью ng-repeat

Question

В моем требовании я должен связать / отобразить в html-таблице, используя ng-repeat, а также динамически добавить строку к этому конкретному клику / индексу.Я пытался, но не смог решить.

<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": ""
  })
};