Question

我在AngularJS app中加载了表格数据。我想在表格中显示它们。但是我也希望有一些行的详细视图。类似的东西：

<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的做法是什么？

Answer 1

为什么不将ng-show和ng-hide指令添加到td？

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

表格包含AngularJS中的详细信息

1 个答案: