我正在创建一个付款门户,用户在其中为paymentPlan
和paymentMethod
创建一个numberOfIntallments
。 paymentPlan
显示在带有ng-repeat
的表中。 numberOfIntallments
最多可以包含36个,我不希望用户看到有关所有installments
的详细信息。
我想做的事:
如果numberOfIntallments
installments。
如果numberOfIntallments
> = 7,则显示前2个installments
和后2个,并在表的中间创建一个showAll
installments
按钮。
我该如何解决?
当前代码:
<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>
最佳答案
您需要在控制器中进行一些计算,然后将结果放入示波器中。然后,您可以调整ng-repeat
以获得所需的结果。
控制器:
$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>