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>
...
<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>