AngularJS开发需求：ng-repeat去重+按支付状态控制表格a标签显示

Hey there! Let's fix your two AngularJS table requirements step by step:

1. Remove Duplicate Month Values in ng-repeat #

To only show the first occurrence of each Month and hide duplicates, we can preprocess your data to mark which rows are the first entry of their respective month. This is more efficient than using a filter in the ng-repeat (which runs on every digest cycle).

Modified JavaScript Controller Code: #

function bindFinanceDetails() {
    var finUrl = baseurl + 'api/FinancialStatement/GetCarFinanceInfo';
    var req = {
        method: 'post',
        data: {
            LoginID: LoginID,
            ContractNumber: 11170200669,
            CustomerId: 2355898046
        },
        url: finUrl,
        headers: {
            RequestedPlatform: "Web",
            RequestedLanguage: cookiePreferredLanguage,
            Logintoken: $cookieStore.get('LoginToken'),
            LoginId: LoginID
        }
    };
    $http(req).then(function(response) {
        var getData = response.data.FinanceList;
        
        // Add flag to mark first row of each month
        if (getData.length > 0) {
            let previousMonth = null;
            getData.forEach(row => {
                row.isFirstMonthEntry = row.Month !== previousMonth;
                previousMonth = row.Month;
            });
        }
        
        $scope.rowCollection = getData;

    }, function(error) {
        toastr.error($filter('translate')('Error Occured'));
    });
}

Modified HTML Month Column: #

<td ng-if="row.isFirstMonthEntry">{{row.Month}}</td>
<td ng-if="!row.isFirstMonthEntry"></td>

This will render the Month value only for the first row of each month, leaving empty cells for subsequent duplicate months. If you wanted to merge cells (using rowspan), that's more complex, but this approach is straightforward for most use cases.

2. Dynamic "Pay Online" Link Display #

Your current code has an empty <a> tag for FULLY_PAID status, which is unnecessary. We can simplify this to only render the link when the status is UNPAID, and leave the cell empty (or add a status text) for FULLY_PAID.

Modified HTML Pay Column: #

<td>
    <!-- Only show "Pay Online" link for UNPAID status -->
    <a ng-if="row.PaymentStatus === 'UNPAID'" href="#" style="cursor:pointer;">Pay Online</a>
    <!-- Optional: Show text for fully paid status (uncomment if needed) -->
    <!-- <span ng-if="row.PaymentStatus === 'FULLY_PAID'" style="color:green;">Fully Paid</span> -->
</td>

This cleans up the DOM by removing unnecessary empty links and makes the logic more readable.

Full Modified Table HTML: #

<table>
   <thead>
      <tr>
         <th>Month</th>
         <th>Installement</th>
         <th>PaymentAmount</th>
         <th>PaymentDate</th>
         <th>Payment Status</th>
         <th>Pay</th>
      </tr>
   </thead>
   <tbody>
      <tr dir-paginate="row in rowCollection|orderBy:type:reverse|filter:searchKeyword|itemsPerPage:maxsize">
         <td ng-if="row.isFirstMonthEntry">{{row.Month}}</td>
         <td ng-if="!row.isFirstMonthEntry"></td>
         <td>{{row.MonthlyInstallement}}</td>
         <td>{{row.PaymentAmount}}</td>
         <td>{{row.PaymentDate}}</td>
         <td>{{row.PaymentStatus}}</td>
         <td>
             <a ng-if="row.PaymentStatus === 'UNPAID'" href="#" style="cursor:pointer;">Pay Online</a>
             <!-- <span ng-if="row.PaymentStatus === 'FULLY_PAID'">Fully Paid</span> -->
         </td>
      </tr>
   </tbody>
</table>

These changes should address both of your requirements cleanly and efficiently. Let me know if you need further tweaks!

内容的提问来源于stack exchange，提问作者Jzl