'How to ng-repeat this table row and increase the ng-show row position value instead of hard coding the values

I am working on a feature which allows a user to create their own table. I'd like to refactor this code.

So it creates a number of rows based on the max rows I have and also increases a row position each time without me hard coding each row.

An example of the code I have is below:

<div ng-show="components.length != 0">
  <h3> Output Preview: <button Class="btn btn-primary" ng-show="components.length > 1" ng-click="hidePositionChange=(hidePositionChange ? false : true)">Change row/order position</button>
  </h3> 
<div>
<table>
  <tr>
    <td ng-repeat="component in components track by $index" ng-show="component.RowPosition == 0">{{component.Text}}{{component.Field}}</td>
  </tr>
  <tr>
    <td ng-repeat="component in components track by $index" ng-show="component.RowPosition == 1">{{component.Text}}{{component.Field}}</td>
  </tr>
  <tr>
    <td ng-repeat="component in components track by $index" ng-show="component.RowPosition == 2">{{component.Text}}{{component.Field}}</td>
  </tr>
...
javascripthtmlangularjsvb.net


Solution 1:[1]

<div ng-show="components.length != 0">
   <h3> Output Preview: <button Class="btn btn-primary" ng-show="components.length > 1" ng-click="hidePositionChange=(hidePositionChange ? false : true)">Change row/order position</button></h3> 
   <div>
      <table>
         <tr ng-repeat="componentRow in components track by $index | limitTo: maxItems | orderBy: '+RowPosition'">
            <td ng-repeat="component in components | limitTo: 3" ng-if="component.RowPosition == $index">{{component.Text}}{{component.Field}}</td>
         </tr>
      </table>
   </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions