Скрытие строки в таблице с помощью ngAnimate

Question

Скрытие строки в таблице с помощью ngAnimate

0

Я пытаюсь скрыть строку в таблице, которая имеет некоторый контент. Я сталкиваюсь с несколькими проблемами.

1) После того, как высота установлена на 0, граница все еще отображается. Как скрыть весь div?

2) Поскольку для содержимого содержится colspan = "5", когда он скрывает ширину таблицы, уменьшается

<table>

<tr>
    <td class="item0">test td 1</td>
    <td class="item1">test td 2</td>
    <td class="item2">test td 3</td>
    <td class="item3">test td 4</td>
    <td class="item4">Click for content</td>     
</tr>
<tr>
    <td  colspan="5">
        <div ng-hide="show" class="cssSlideUp">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar nisi sit amet luctus efficitur. Vivamus eu risus suscipit, ultricies tortor eu, sodales tellus. Sed sed feugiat massa. Cras mollis, erat eget pellentesque porttitor, mauris lectus ultricies neque, varius iaculis quam mi et quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc egestas nec mi eu lobortis. Nam eu scelerisque orci. Mauris vel ultricies dui, non accumsan turpis. Aliquam pulvinar in dolor sit amet fringilla. Integer sed quam pellentesque, volutpat arcu a, feugiat nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed auctor ac nulla sit amet suscipit.
        </div>
    </td>
</tr>
<tr>
    <td class="item0">test td 5</td>
    <td class="item1">test td 6</td>
    <td class="item2">test td 7</td>
    <td class="item3">test td 8</td>
    <td class="item4">Click for content</td>     
</tr>
</table>

Plnkr: http://plnkr.co/edit/4ovuZ7YwOB3i8bK7WLLz?p=preview

user1184100 23 июль 2015, в 16:27

Источник

0

Вы прячете весь div. Проблема в том, что вы установили границу для <td>. Это родительский элемент div, который вы скрываете, поэтому граница остается. Добавьте это в свою таблицу CSS {width: 100%;}, если вы хотите, чтобы таблица всегда была настроена на полную ширину страницы.
Oliver McPhee 23 июль 2015, в 14:04
0

Можно ли показать / скрыть тд или тр вместо div
user1184100 23 июль 2015, в 14:12
0

Да - просто переместите ng-hide = "show" на уровень <tr>.
Oliver McPhee 23 июль 2015, в 14:41

Показать ещё 1 комментарий

Теги:

javascript

angularjs

css

2 ответа

Ещё вопросы

Вы прячете весь div. Проблема в том, что вы установили границу для <td>. Это родительский элемент div, который вы скрываете, поэтому граница остается. Добавьте это в свою таблицу CSS {width: 100%;}, если вы хотите, чтобы таблица всегда была настроена на полную ширину страницы.
Можно ли показать / скрыть тд или тр вместо div
Да - просто переместите ng-hide = "show" на уровень <tr>.

mikeagoff · Answer 1 · 2015-07-23T13-45-00.000Z

Когда вы скрываете div, таблица сжимается, потому что она не имеет ширины. Поэтому он сокращается только до размера, необходимого для отображения оставшегося содержимого.

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

table { width: 100%; }

или...

<table width="100%">

Что касается проблемы с границей, переместите ng-hide в 'tr':

<tr ng-hide="show">
    <td  colspan="5">
        <div class="cssSlideUp">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar nisi sit amet luctus efficitur. Vivamus eu risus suscipit, ultricies tortor eu, sodales tellus. Sed sed feugiat massa. Cras mollis, erat eget pellentesque porttitor, mauris lectus ultricies neque, varius iaculis quam mi et quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc egestas nec mi eu lobortis. Nam eu scelerisque orci. Mauris vel ultricies dui, non accumsan turpis. Aliquam pulvinar in dolor sit amet fringilla. Integer sed quam pellentesque, volutpat arcu a, feugiat nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed auctor ac nulla sit amet suscipit.
        </div>
    </td>
</tr>

Oliver McPhee · Answer 2 · 2015-07-23T12-40-00.000Z

Вы скрываете весь div.

Проблема в том, что вы установили свою границу на td. Это родительский элемент div, который вы скрываете, поэтому граница остается.

Если вы хотите, чтобы таблица всегда имела одинаковую ширину, вам необходимо установить ее ширину. Например, добавьте это в свой css:

table{width:100%;}