web-dev-qa-db-fra.com

Comment utiliser ng-if avec table pour afficher td en fonction de la condition

En référence au post précédent sur ng-if dans DIV pour référence, le lien donné ici :: Ng-If dans DIV , cependant, quand j'ai essayé la même chose avec ng-if à l'intérieur d'une table avec ng-repeat sur td, cela ne semble pas bien fonctionner. Corrigez-moi si je me trompe J'ai fait 2 essais pour afficher la colonne en fonction de la condition mais aucune ne fonctionne. Ci-dessous, j'ai donné le code pour référence. Quelqu'un pourrait-il m'aider à ce sujet. Veuillez indiquer si vous avez besoin de plus de précisions.

[~ # ~] html [~ # ~]

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

Essayez :: 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>
angularjsangular-ng-if
10
Arun

ng-if devrait fonctionner pour votre essai :: 1 . Voici l'exemple de travail du violon

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

12
Shivaraj

La plupart des navigateurs ignoreront tous les autres éléments DOM au sein d'une structure de table si elle n'est pas bien formée. Ce qui implique, dans votre code ci-dessus, vous ne pouvez pas avoir de balise div dans un tr. Essayez ceci à la place

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

Évitez d'utiliser inside pour adhérer à une meilleure sémantique du navigateur. De plus, lors de la vérification de l'égalité, "===" peut être une meilleure option, si vous voulez garantir le type de la valeur sur le RHS de l'expression d'égalité.

Cela fonctionne pour les deux <table> et <div> individuellement

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

3
akskap