CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
chaitanay
chaitanay

Reputation: 23

add table row by using specific $index using ng-repeat

In my requirement I have to bind/display in html table using ng-repeat and also add row dynamically to that specific click/index. I tried, but unable to solve.

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

Upvotes: 1

Views: 56

Answers (1)

Rikin
Rikin

Reputation: 5473

This is probably what you need. You need to add all the missing properties in that object.

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

Based on OP, he wants to add row right after the index passed in i.e. in between array items. So solution for that would be to use splice instead.

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

Upvotes: 2

Related Questions