web-dev-qa-db-ja.com

ng-ifをテーブルで使用して、条件に基づいてtdを表示する方法

DIV内のng-ifに関する以前の投稿を参照するには、ここにあるリンクを参照してください:: DIV内のNg-If 、しかし、tdでng-repeatを使用してテーブル内のng-ifで同じことを試みたとき、うまく機能していないようです。間違っている場合は修正してください。条件に基づいて列を2回表示しようとしましたが、何も動作しません。以下に参照用のコードを示しました。誰かがこれで私を助けることができますか？さらに説明が必要な場合はお知らせください。

[〜＃〜] html [〜＃〜]

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

Try :: 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は、try :: 1で機能するはずです。ここにフィドル作業例があります

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

12
Shivaraj

ほとんどのブラウザは、テーブル構造内のその他の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>
4
ch4nd4n

ブラウザーのセマンティクスを強化するために、内部を使用しないでください。さらに、等式の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/

3
akskap