Как использовать ng-if с таблицей для отображения td на основе условия

Со ссылкой на более раннее сообщение о ng-if в DIV для справки приведенная здесь ссылка:: Ng-If внутри DIV , однако, когда я попробовал то же самое с ng-if внутри таблицы с ng-repeat на td, похоже, это не работает. Поправьте меня, если я ошибаюсь, я сделал 2 попытки отобразить столбец на основе условия, но ни одна из них не работает. Ниже я дал код для справки. Может ли кто-нибудь помочь мне в этом. Пожалуйста, дайте знать, если вам нужны дополнительные разъяснения.

HTML

Попробовать :: 1

   <table>
        <tr ng-repeat = "data in comments">
            <td ng-if="data.type == 'hootsslllll' ">
             //differnt template with hoot data
            </td>
            <td ng-if="data.type == 'story' ">
             //differnt template with story data
            </td>
            <td ng-if="data.type == 'article' ">
            //differnt template with article data
            </td>
        </tr>

    </table>

Попробовать :: 2

<table>
    <tr ng-repeat = "data in comments">
        <div ng-if="data.type == 'hootsslllll' ">
            <td> //differnt template with hoot data </td>
        </div>
        <div ng-if="data.type == 'story' ">
            <td> //differnt template with story data </td>
        </div>
        <div ng-if="data.type == 'article' ">
            <td> //differnt template with article data </td>
        </div>
    </tr>
</table>

angularjs angular-ng-if
person Arun    schedule 05.05.2014    source источник
comment
it doesn't seems to work well. можно уточнить? Что он (не) делает?   -  person Tim    schedule 05.05.2014
comment
Таблицы иногда не любят div внутри trs. Попробуйте удалить div и поместить выражение ng-if прямо в тег td.   -  person Zack Argyle    schedule 05.05.2014
comment
@ZackArgyle в моей первой попытке я сделал то же самое, но это не работает   -  person Arun    schedule 05.05.2014
comment
@: Тиму Кастелину нужно отобразить столбец на основе условия   -  person Arun    schedule 05.05.2014
comment
ngIf добавляет и удаляет узлы dom в зависимости от условия, вместо этого вы можете попробовать ngShow или ngHide, которые просто устанавливают для рассматриваемого элемента значение display: none.   -  person Kevin Stone    schedule 05.05.2014
comment
Здесь отлично работает: plnkr.co/edit/pBcnmkQkEoVCTArYG0q2?p=preview. Вам нужно будет рассказать нам больше о вашем коде, версии angular и т. д. Попробуйте придумать минимальный plunkr, воспроизводящий проблему. И расскажите нам, что именно происходит.   -  person JB Nizet    schedule 05.05.2014

Ответы (3)


arrow_upward
12
arrow_downward

ng-if должно работать для вашего try::1. Вот рабочий пример скрипки

http://jsfiddle.net/shivaraj/n3xWB/

person Shivaraj    schedule 05.05.2014

arrow_upward
4
arrow_downward

Большинство браузеров будут игнорировать любые другие элементы DOM в структуре таблицы, если она неправильно сформирована. Это означает, что в приведенном выше коде вы не можете иметь тег div в теге tr. Попробуйте это вместо

<table>
  <tr ng-repeat = "data in comments">
    <td ng-if="data.type == 'hootsslllll' "> //differnt template with hoot data </td>
    <td ng-if="data.type == 'story' "> //differnt template with story data </td>
    <td ng-if="data.type == 'article' "> //differnt template with article data </td>
  </tr>
</table>
person ch4nd4n    schedule 05.05.2014

arrow_upward
3
arrow_downward

Избегайте использования внутри, чтобы придерживаться лучшей семантики браузера. Более того, при проверке на равенство '===' может быть лучшим вариантом, если вы хотите убедиться, что тип значения находится в правой части выражения равенства.

Это работает как для <table>, так и для <div> по отдельности.

<div ng-controller="tableCtrl">
        <div ng-repeat="data in comments">
            <div ng-if="data.type === 'hootsslllll' ">//differnt template with hoot data</div>
            <div ng-if="data.type === 'story' ">//differnt template with story data</div>
            <div ng-if="data.type === 'article' ">//differnt template with article data</div>
        </div>
</div>

http://jsfiddle.net/Mu6T6/3/

person akskap    schedule 05.05.2014