Как да използвате 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. Опитайте да премахнете divs и да поставите израза 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. Ще трябва да ни кажете повече за вашия код, ъгловата версия и т.н. Опитайте се да измислите минимален 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

Избягвайте да използвате вътре, за да се придържате към по-добра семантика на браузъра. Освен това, когато проверявате за равенство, „===“ може да е по-добра опция, ако искате да гарантирате типа на стойността в RHS на израза за равенство.

Това работи както за <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