我有一个类型区域,每个区域包含一个名为 items
的数组,其中包含两种类型: item
和 colourItem
。
我需要在表中将这两种类型显示为行,全部混合在一起。
我将每个项目包裹在DIV中,该项目检查项目类型,然后显示该项目的正确属性(两种类型具有不同的属性(。
但是,即使它们不符合ng-if
条件,这两个DIV似乎也将<td>
元素添加到行中。因此表有太多的列。
如何检查每行类型并显示该类型的正确属性?它们需要混合在一起,而不是显示所有类型,然后是所有其他类型。
代码:
<table>
<thead>
<tr>
<td width="94"></td>
<td>Cost Type</td>
<td>Code</td>
<td>Product</td>
<td>Options</td>
<td>Quantity</td>
<td>Amount</td>
<td>Supplier</td>
<td></td>
</tr>
</thead>
<tbody dnd-list="area.items"
dnd-disable-if="$ctrl.performingSave"
dnd-allowed-types="['theItemType']"
dnd-drop="$ctrl.specTplItemDropped(index, item, external, type, area)">
<tr ng-repeat="theItem in area.items"
dnd-draggable="theItem"
dnd-effect-allowed="move"
dnd-moved="$ctrl.specTplItemMoved(area,$index)"
dnd-type="'theItemType'">
<div ng-if="theItem.product || theItem.offeringId">
<td>
<md-icon ng-show="theItem.product.offeringType == $ctrl.enumBase.enumConstants.PRODUCT_TYPE_BUNDLE">folder</md-icon>
<md-icon ng-show="theItem.bundleId">attach_file</md-icon>
<md-icon ng-show="theItem.inSpec">style</md-icon>
<md-icon ng-show="theItem.hasImage">photo</md-icon>
</td>
<td>
<cb-enum id="theItem.costType"
options="$ctrl.costType"></cb-enum>
</td>
<td>{{theItem.product.code}}</td>
<td>{{theItem.product.name ? theItem.product.name : theItem.productOther}}</td>
<td>
<ul class="inline-list">
<li ng-repeat="opt in theItem.options">{{opt.name}}</li>
</ul>
</td>
<td>{{$ctrl.getQuantity(theItem)}}</td>
<td ng-if="theItem.costType === $ctrl.enumBase.enumConstants.COST_TYPE_PROVISIONAL">{{theItem.rateSnapshot | currency:"$":2}}</td>
<td ng-if="theItem.costType !== $ctrl.enumBase.enumConstants.COST_TYPE_PROVISIONAL">-</td>
<td>
{{theItem.supplier.legalName ? theItem.supplier.legalName : "-"}}
</td>
</div>
<div ng-if="theItem.colourItem">
<td>
<md-icon ng-show="theItem.hasImage">format_paint</md-icon>
</td>
<td>-</td>
<td>{{theItem.colourItem.code}}</td>
<td>{{theItem.colourItem.name}}</td>
<td>-</td>
<td>{{$ctrl.getQuantity(theItem)}}</td>
<td>-</td>
<td>-</td>
</div>
<td class="actions">
<md-menu>
<md-button aria-label="Open phone interactions menu"
class="md-icon-button md-raised"
ng-click="$mdMenu.open($event)">
<md-icon md-menu-origin>more_horiz</md-icon>
</md-button>
<md-menu-content width="4">
<md-menu-item>
<md-button ng-click="$ctrl.editProductLine($event, theItem)">
<md-icon class="md-menu-align-target">mode_edit</md-icon>
Edit Item
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-disabled="theItem.bundleId"
ng-click="$ctrl.removeProductLine($event, theItem)">
<md-icon class="md-menu-align-target">remove_circle</md-icon>
Remove Item
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="$ctrl.viewProduct($event, theItem);">
<md-icon class="md-menu-align-target">pageview</md-icon>
View Item
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</td>
</tr>
</tbody>
</table>
因为ng-if在ng repeat之后被处理...您可以尝试使用ng-repeat-start/end so:
<table>
<tr ng-repeat-start="item in area.items" ng-if="theItem.product || theItem.offeringId">
.....
</tr>
<tr ng-repeat-end ng-if="theItem.colourItem">
....
</tr>
</table>
我目前还不能进行编码,但是何时会验证。只是以为您可能需要一个快速的答案。