I am developing a payment platform where users can set up a paymentPlan for a specific paymentMethod and choose the number of numberOfIntallments. The details of the paymentPlan are displayed in a table using ng-repeat. Users can select up to 36 numberOfIntallments, but I only want to show specific details about the installments.
My Objective:
If the numberOfIntallments is less than 7, then display all installments.
If the numberOfIntallments is 7 or more, display the first 2 and last 2 installments and include a button in the middle of the table to toggle and show all installments.
How I Plan to Address This Challenge:
Current Code Snippet:
<tr ng-repeat="model in paymentPlan.installments">
<td>{{model.dueDate | date: 'shortDate'}}</td>
<td>{{model.principal | currency:undefined:0}}</td>
<td ng-show="numberOfInstallments > 1">{{model.contractInterest | currency:undefined:0}}</td>
<td ng-show="numberOfInstallments > 1">{{model.lendingFee | currency:undefined:0}}</td>
<td ng-show="paymentMethod == 0">{{model.noticeAndPaymentFee | currency:undefined:0}}</td>
<td>{{model.installmentFee | currency:undefined:0}}</td>
<td>{{model.total | currency:undefined:0}}</td>
</tr>