在下面的Div
中,我正在对某些数据使用ng-repeat
来填充列表。在执行此操作时,如果通过使用TR
上的ng-if
指令来满足某个要求,我不想创建一个特定的x.Equipment_Cost_Child != 0
标签,但是无论表达式如何,我都无法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)}}
答案 0 :(得分: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>
答案 1 :(得分:0)
替换:
<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>
列表。您可以直接在ng-if
上使用<tr>
。
编辑:使用ng-show
或ng-hide
显示/隐藏元素。它的重量要轻得多,因为ng-if
会触发DOM重新编译并生成新的作用域。