отобразить последний тд tr в таблице на новой строке в элементе ng-repeat

0

Я нашел немало подобных вопросов, но, к сожалению, никто из них не выполняет эту работу для меня, и мне интересно, как я могу продвинуться в последней строке td внутри tg ng-repeat до следующей строки? Пожалуйста, считайте, что мои навыки CSS абсолютно нулевые.

                        <table>
                        <thead>
                            <tr>
                                <th>Column1</th>
                                <th>Column2</th>
                                <th>Column3</th>
                                <th>Column4</th>
                                <th>Column5</th>
                            </tr>
                        </thead>
                        <tbody ng-repeat="items in ItemsList">
                            <tr ng-repeat="pItem in items.Items">
                                <td>{{pItem.Item1}}</td>
                                <td>{{pItem.Item2 }}</td>
                                <td>{{pItem.Items3 }}</td>
                                <td>{{pItem.Item4 }}</td>
                                <td>{{pItem.Item5 }}</td>
                                <td>{{pItem.Item6 }}</td>
                            </tr>
                        </tbody>
                    </table>

pItem.Item6 - это столбец, который я хочу переместить на следующую строку (строка с одним столбцом, охватывающим полный размер строки).

Изображение 174551

Я хочу, чтобы Item6 был в следующей строке следующим образом. Изображение 174551

  • 0
    Что ж. твой вопрос мне не очень понятен. ты можешь нарисовать краской и положить сюда? Но если вы хотите выбрать особенно последний тд и сделать что-то, используйте $ last в ng-repeat. docs.angularjs.org/api/ng/directive/ngRepeat
  • 0
    Я изменил свой вопрос с выводом, который у меня есть на данный момент, и результатом, который я хочу получить.
Показать ещё 2 комментария
Теги:
asp.net-mvc

3 ответа

0
Лучший ответ

Может быть, вы хотите этого

<table>
    <tbody ng-repeat="items in ItemsList">
        <tr ng-repeat="pItem in items.Items">
            <td>
                <table>
                    <thead ng-if="$first && $parent.$first">
                       <tr>
                           <th>Column1</th>
                           <th>Column2</th>
                           <th>Column3</th>
                           <th>Column4</th>
                           <th>Column5</th>
                       </tr>
                    </thead>
                    <tr>
                        <td>{{pItem.Item1}}</td>
                        <td>{{pItem.Item2 }}</td>
                        <td>{{pItem.Item3 }}</td>
                        <td>{{pItem.Item4 }}</td>
                        <td>{{pItem.Item5 }}</td>
                    </tr>
                    <tr>
                        <td colspan="5">{{pItem.Item6 }}</td>
                    </tr>
                </table>
            </td>
        </tr>
    </tbody>
</table>
Поделиться
  • 0
    Тайкия, это нормально, пока есть только одна строка, но для нескольких строк она создаст строки Item6 в конце таблицы, что неверно.
  • 0
    Ты прав. Я отредактировал свой пост, чтобы добавить table в tr внешней таблицы для последовательной печати столбцов. Можете ли вы проверить это сейчас?
Показать ещё 10 комментариев
0

Вы можете обрабатывать данные в контроллере, чтобы сделать структуру данных плоской.

Внутри контроллера:

$scope.rows = [];

angular.forEach($scope.ItemsList, function(items){
    angular.forEach(items.Items, function(pItem){
        $scope.rows.push(pItem);
    });
});

И html для этой структуры данных будет:

<table>
    <thead>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
            <th>Column4</th>
            <th>Column5</th>
        </tr>
    </thead>
    <tbody ng-repeat="row in rows">
        <tr>
            <td>{{row.Item1}}</td>
            <td>{{row.Item2 }}</td>
            <td>{{row.Item3 }}</td>
            <td>{{row.Item4 }}</td>
            <td>{{row.Item5 }}</td>
        </tr>
        <tr>
            <td colspan="5">{{row.Item6 }}</td>
        </tr>
    </tbody>
</table>
Поделиться
0 
    <table>
    <tbody ng-repeat="items in ItemsList">
        <tr ng-repeat="pItem in items.Items">
            <td>
                <table>
                    <thead>
                        <tr>
                            <th>Column1</th>
                            <th>Column2</th>
                            <th>Column3</th>
                            <th>Column4</th>
                            <th>Column5</th>
                       </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{pItem.Item1}}</td>
                            <td>{{pItem.Item2 }}</td>
                            <td>{{pItem.Items3 }}</td>
                            <td>{{pItem.Item4 }}</td>
                            <td>{{pItem.Item5 }}</td>
                        </tr>
                        <tr>
                            <td colspan="5">{{pItem.Item6 }}</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

выше я переместил thead из внешней таблицы в tbody внутреннего стола, и теперь он работает, но заголовок начал появляться для каждой строки теперь

Поделиться
  • 0
    В вашем решении thead будет повторяться перед каждым из элементов tr . Я не думаю, что хочу этого. Я отредактировал свой ответ, чтобы распечатать thead только один раз. Можете ли вы проверить, если это работает.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню