时间戳

首页 > 解决方案 > 带有 ng-if 的 Angular ng-repeat 不适用于 tr 标签

angularjs - 带有 ng-if 的 Angular ng-repeat 不适用于 tr 标签

问题描述

在下面，Div我使用ng-repeat一些数据来填充列表。在执行此操作时，我不希望通过使用指令TR来创建某个标签，如果它符合某个要求，但是无论表达式如何，我都无法正常工作。ng-ifx.Equipment_Cost_Child != 0ng-if

我怎样才能让它只显示 TR 如果x.Equipment_Cost_Child > 0？

我已经尝试过“ x.Equipment_Cost_Child > 0”我还ng-if直接将 tr 标签而不是 div 标签。

你怎么看？

<div  ng-repeat="x in reservationdata" ng-click="customerClickedEvent(x.ID)">
<table class="unit">
Item:{{$index + 1}}
<tr>
    <td style="font-weight:bold">Equipment Type: </td>
    <td style="font-weight:bold">{{x.EquipmentType}}</td>           
</tr>
<tr>    
    <td style="font-weight:bold" >Equipment Count:  </td>
    <td style="font-weight:bold">{{x.Equipment_Count}}</td>
</tr>
<tr>    
    <td>Adult Quantity:  </td>
    <td>{{x.Equipment_Count_Adult}} Cost @ ${{x.Duration_Cost_Adult}}</td>
</tr>
<div ng-if="x.Equipment_Cost_Child != 0">        //this line doesn't work
<tr>    
    <td>Child Quantity:  </td>
    <td>{{x.Equipment_Count_Child}} Cost @ ${{x.Duration_Cost_Child}}</td>
</tr>
</div>
<tr>
    <td>Sending Letters: </td>
    <td> {{x.Equipment_Form_Status}}</td>
</tr>
    <td> Total Cost For Item: </td>
    <td> ${{(x.Equipment_Count_Adult * x.Duration_Cost_Adult)+(x.Equipment_Count_Child * x.Duration_Cost_Child)}}

标签： angularjshtml-tableangularjs-ng-repeatangularjs-ng-if

解决方案

在一个标签中同时使用 ng-if 和 ng-repeat：

<tr ng-repeat="feature in features"
    ng-if="feature.id === 1" >
</tr>

或者，如果你想有条件地显示一些模板，你可以使用 ng-switch 例如：

<tr
    ng-repeat="feature in features"
    ng-switch="feature.id" >
    <span ng-switch-when="1"></span>
    <span ng-switch-when="2"></span>
</tr>

推荐阅读