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 回答