Question

我有一个使用angular js绑定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>{{row.Month}}</td>
         <td>{{row.MonthlyInstallement}}</td>
         <td>{{row.PaymentAmount}}</td>
         <td>{{row.PaymentDate}}</td>
         <td>{{row.PaymentStatus}}</td>
         <td ng-if="row.PaymentStatus == 'UNPAID'">
            <a href="#" style="cursor:pointer;">Pay Online</a>
         </td>
         <td ng-if="row.PaymentStatus == 'FULLY_PAID'">
            <a href="#" style="cursor:pointer;"></a>
         </td>
      </tr>
   </tbody>
</table>

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;
        $scope.rowCollection = getData;

    }, function(error) {
        toastr.error($filter('translate')('Error Occured'));
    });
}

Answer 1

一个非常hacky的解决方案将类似于以下内容（只显示未付费td元素中所需的更改）：

<td ng-if="row.PaymentStatus === 'UNPAID'" ng-show="$index === data.payOnlineIndex" 
    ng-init="data.payOnlineIndex = (!data.payOnlineIndex || (data.payOnlineIndex > $index)) ? $index : data.payOnlineIndex">
   <a href="#" style="cursor:pointer;">Pay Online</a>
</td>

这样，ng-init将针对所有未付费元素运行，将最小索引设置为payOnlineIndex变量。 ng-show将确保只显示一个索引最小的元素。

我使用数据对象封装payOnlineIndex以保持对它的稳定引用。这还需要在控制器代码中添加以下内容：

$scope.data = { payOnlineIndex: null };

在此处查看有效的jsFiddle示例：https://jsfiddle.net/t3vktv0r/

另一种选择是在控制器中运行过滤器和orderBy，搜索第一次出现＆＃34; unpaid＆＃34;行，并标记＆＃34;在线支付的元素＆＃34;如果在您的视图中，您可以使用ng-if进行测试。

绑定第一个值并从ng-repeat中删除所有其他重复值

1 个答案: