收到服务信息后动态建表

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>

控制器：

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
})