Expandable middle rows in table with AngularJs

Question

I'm creating a payment portal where a user creates a paymentPlan for a paymentMethod and numberOfIntallments. The paymentPlan is shown in a table with ng-repeat. The numberOfIntallments can be up to 36 and I don't want the user to see details about all the installments.

What I want to do:

If numberOfIntallments < 7 then show all installments.
If numberOfIntallments >= 7 show the first 2 installments and the last 2 and create a button in the middle of the table to showAll installments.

How can I solve this?

Current code:

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

Add a variable "show" and the condition would be something like "if show || installment > whatever". Then add a button to show all the data with ng-click="show != show" — yBrodsky
– yBrodsky, Commented May 4, 2016 at 15:24

Dr. Cool · Accepted Answer · 2016-05-04 17:44:56Z

You'll need to do a bit of calculation in your controller and put the result in your scope. Then you can adjust your ng-repeat to get the result you want.

CONTROLLER:

$scope.ShowMiddleRows = false;

if ($scope.numberOfInstallments >= 7) {
    // Add the first two installments into PrefixRows[] array
    for (i=0; i < 2; i++) {
        $scope.PrefixRows.push($scope.paymentPlan.installments[i]);
    }
    // Add the lasttwo installments into SuffixRows[] array
    for (i=$scope.paymentPlan.installments-2; i < scope.paymentPlan.installments; i++) {
        $scope.SuffixRows.push($scope.paymentPlan.installments[i]);
    }
    // Add the remaining middle rows into MiddleRows[] array
    for (i=2; i < $scope.paymentPlan.installments-2; i++) {
        $scope.MiddleRows.push($scope.paymentPlan.installments[i]);
    }
}

HTML:

<!-- this <tbody> will only show if numberOfInstallments >= 7 -->
<tbody ng-if="numberOfInstallments >= 7">

    <!-- 2 PREFIX ROWS -->
    <tr ng-repeat="model in PrefixRows">
        <td> ... </td>
    </tr>

    <!-- MIDDLE ROWS or a button -->
    <!-- ShowMiddleRows is a scope variable which is true or false depending on button click. Setting it to true will show the middle rows -->
    <tr ng-show="!ShowMiddleRows">
        <td colspan="10"><button ng-click="ShowMiddleRows = !ShowMiddleRows">Show All Installments</button></td>
    </tr>
    <tr ng-repeat="model in MiddleRows" ng-show="ShowMiddleRows">
        <td> ... </td>
    </tr>
    <!-- 2 SUFFIX ROWS -->
    <tr ng-repeat="model in SuffixRows">
        <td> ... </td>
    </tr>
</tbody>

<!-- this <tbody> will only show if numberOfInstallments < 7 -->
<tbody ng-if="numberOfInstallments < 7">
    <tr ng-repeat="model in paymentPlan.installments">
        <td> ... </td>
    </tr>
</tbody>

Collectives™ on Stack Overflow

Expandable middle rows in table with AngularJs

What I want to do:

How can I solve this?

Current code:

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

What I want to do:

How can I solve this?

Current code:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related