0

AngularJSアプリに表形式のデータをロードしました。それらをテーブルに表示したい。ただし、一部の行の詳細ビューも必要です。何かのようなもの：

<table>
    <tr ng-repeat="datum in data">
        <!-- if datum.showDetail => detail view -->

            <td colspan="N">
                <h1>{{ datum.field1 }} <small>{{ datum.field2 }}</small></h1>
                ...
                <p>{{ datum.fieldN }}</p>
            </td>

        <!-- else => row view -->

            <td>{{ datum.field1 }}</td>
            <td>{{ datum.field2 }}</td>
            ...
            <td>{{ datum.fieldN }}</td>
    </tr>
</table>

これを行うAngularの方法は何ですか？

4

1 に答える 1

1

なぜtdにディレクティブを追加しないのですかng-show？ng-hide

<table>
    <tr ng-repeat="datum in data" >
        <!-- if datum.showDetail => detail view -->

            <td colspan="N" ng-show="datum.showDetail">
                <h1>{{ datum.field1 }} <small>{{ datum.field2 }}</small></h1>
                ...
                <p>{{ datum.fieldN }}</p>
            </td>

        <!-- else => row view -->

            <td ng-hide="datum.showDetail">{{ datum.field1 }}</td>
            <td ng-hide="datum.showDetail">{{ datum.field2 }}</td>
            ...
            <td ng-hide="datum.showDetail">{{ datum.fieldN }}</td>
    </tr>
</table>

また、Angular UI拡張機能を使用している場合は、ui-ifディレクティブがおそらくより適切であることに注意してください。これは、のように単に非表示にするのではなく、未使用のtdを実際にテーブルから削除するためng-hideです。

于 2013-02-28T01:09:44.070 に答える