角度 ng 重复与 ng 如果不适用于 tr 标签

Question

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

如果x.Equipment_Cost_Child > 0，如何让它只显示 TR

？我试过"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)}}

Answer 1

在一个标签中同时使用 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>

Answer 2

替换：

<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 ng-show="x.Equipment_Cost_Child > 0">
<td>Child Quantity:  </td>
<td>{{x.Equipment_Count_Child}} Cost @ ${{x.Duration_Cost_Child}}</td>
</tr>

<div>标签正在破坏您的<tr>列表。您可以直接在<tr>上使用ng-if。

编辑：使用ng-show或ng-hide显示/隐藏元素。它的重量要轻得多，因为ng-if触发 DOM 重新编译并生成新的作用域。