从服务接收信息后动态构建表

Dynamically build table after it recieves information from service

本文关键字：动态 构建 信息 服务      更新时间：2023-09-26

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

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

听起来您可以使用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
})
相关文章：