CODEWITHSUNDEEP
angularjsngtable
DirtyMind
DirtyMind

Reputation: 2573

How to add row explicitly in a table in angular JS after Nth row?

How can i insert some custom rows after Nth row is created in angular js. For example in checklist items there are 10 objects and i have to put two extra rows after sixth row. 

<html>
<table>
  <thead>
    <tr>
      <th>Task</th>
      <th>N/A</th>
      <th>Date Completed</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in checklist">
      <td>{{item.taskName}}</td>
      <td>
        <input type="checkbox">
      </td>
      <td>
        <input type="text">
      </td>
    </tr>
  </tbody>
</table>

</html>

Upvotes: 2

Views: 1388

Answers (2)

Sandeep
Sandeep

Reputation: 1479

Use $index variable of ng-repeat directive. like : ->

<html>
<body>
<table>
  <thead>
    <tr>
      <th>Task</th>
      <th>N/A</th>
      <th>Date Completed</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in checklist" ng-if="$index<=6">
      <td>{{item.taskName}}</td>
      <td>
        <input type="checkbox">
     </td>
     <td>
       <input type="text">
     </td>
   </tr>
   <tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
   <tr ng-repeat="item in checklist" ng-if="$index>6">
     <td>{{item.taskName}}</td>
     <td>
       <input type="checkbox">
     </td>
     <td>
       <input type="text">
     </td>
   </tr>
  </tbody>
</table>
</body>
</html>

Upvotes: 3

Joe Pontani
Joe Pontani

Reputation: 451

See the documentation for splice(). It can either add or remove items from an array at any given index. You'll want something along the lines of arrayOfItems.splice(5, 0, addAfter6thItem)

Upvotes: 0

Related Questions