javascript - 接收到服务信息后动态建表

Question

HTML 代码:

<table class="table table-bordered table-striped">
    <thead>
        <tr>
            <td>one</td>
            <td>two</td>
            <td>three</td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="color in colors">
            <td>{{ color.one }}</td>
            <td>{{ color.two }}</td>
            <td>{{ color.three }}</td>
        </tr>
    </tbody>
</table>

Controller :

var SomeController = function ($scope, SomeService, $window) {
    var colors= [];

    SomeService.someFunction().success(function (data, status, header, config) {
        colors= data;
    }).error(function (data, status, headers, config) {
        // handle error
    });
};

基本上，我需要根据后端中的内容动态创建表...但是，问题是，一旦我调用该页面，它会自动加载列，一秒钟左右，它就会得到从服务中回来。无论如何，我可以延迟加载时间或让表“刷新”本身以显示新数据。

Answer 1

听起来您可以使用 ngShow并等待您的数据在 $scope.colors 上解析。这应该会延迟显示您的表格，直到调用完成。尝试以下操作...

<table 
    class="table table-bordered table-striped"
    ng-show="colors" class="ng-hide">
    <thead>
        <tr>
            <td>one</td>
            <td>two</td>
            <td>three</td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="color in colors">
            <td>{{ color.one }}</td>
            <td>{{ color.two }}</td>
            <td>{{ color.three }}</td>
        </tr>
    </tbody>
</table>

<小时/>

SomeService.someFunction().success(function (data, status, header, config) {
    $scope.colors = data; // let colors be defined on $scope
})