Отображение строк условной таблицы Angular JS - PullRequest
Новая
       6

Отображение строк условной таблицы Angular JS

0 голосов
/ 27 апреля 2018

У меня есть массив области типа, и каждая область содержит массив с именем items, который содержит два типа: item и colourItem.

Мне нужно отобразить эти два типа в виде строк в таблице, смешанных вместе.

Я завернул каждый элемент в элемент div, который проверяет тип элемента и затем отображает правильные свойства этого элемента (два типа имеют разные свойства).

Однако, два div'а, кажется, добавляют элементы <td> в строку, даже если они не удовлетворяют условию ng-if. Таким образом, в таблице слишком много столбцов.

Как проверить типы в каждой строке и отобразить правильные свойства этого типа? Они должны быть смешаны вместе, а не отображать все один тип, а затем все другие типы.

код: 

<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>

1 Ответ

0 голосов
/ 27 апреля 2018

Поскольку ng-if обрабатывается после ng-repeat ... вы можете попробовать использовать ng-repeat-start / end следующим образом: 

<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>

Я не в том месте, где могу кодировать в данный момент, но проверю, когда я. Просто подумал, что тебе может понадобиться быстрый ответ.

...