异步加载数据的 BootstrapTable AngularJS 扩展不起作用

Question

我正在使用来自 here

的 BootstrapTable AangularJS 扩展

并且 this plnkr 显示了与扩展一起使用的示例。但是该示例使用了在呈现 table 之前生成的静态数据。但我试图让它与动态加载的数据一起工作（假设 ajax 请求）。但这是行不通的。数据未呈现。

angular.module('app', ['bsTable'])
    .controller('MainController', function ($scope, $timeout) {

function makeRandomRows () {
    var rows = [];
    for (var i = 0; i < 500; i++) {
        rows.push(
          {
            index: i,
            id: 'row ' + i,
            name: 'GOOG' + i,
            flagImage: '4'
        }
        );
    }
    return rows;
}

$timeout(function(){
    console.log("timedout");
      $scope.bsTableControl.data  = makeRandomRows({ workspace: "test"});
}, 2000);

    var rows = makeRandomRows();

    $scope.bsTableControl = {
        options: {
            data: [],
            rowStyle: function (row, index) {
                return { classes: 'none' };
            },
            cache: false,
            height: 400,
            striped: true,
            pagination: true,
            pageSize: 10,
            pageList: [5, 10, 25, 50, 100, 200],
            search: true,
            showColumns: true,
            showRefresh: false,
            minimumCountColumns: 2,
            clickToSelect: false,
            showToggle: true,
            maintainSelected: true,
            columns: [{
                field: 'state',
                checkbox: true
            }, {
                field: 'index',
                title: '#',
                align: 'right',
                valign: 'bottom',
                sortable: true
            }, {
                field: 'id',
                title: 'Item ID',
                align: 'center',
                valign: 'bottom',
                sortable: true
            }, {
                field: 'name',
                title: 'Item Name',
                align: 'center',
                valign: 'middle',
                sortable: true
            }, {
                field: 'flag',
                title: 'Flag',
                align: 'center',
                valign: 'middle'
            }]
        }
    };

 });

<body ng-controller="MainController">
  <h1>Angular bsTable</h1>
  <div>
    <table bs-table-control="bsTableControl"></table>
  </div>

</body>

感谢您的帮助。

Answer 1

我想出了解决办法。我只需要在加载数据后执行 bsTable 初始化代码，而不是之前进行初始化。

Updated plnkr

$timeout(function(){
        console.log("timedout");


            $scope.bsTableControl = {
            options: {
                data: makeRandomRows({ workspace: "test"}),
                rowStyle: function (row, index) {
                    return { classes: 'none' };
                },
                cache: false,
                height: 400,
                striped: true,
                pagination: true,
                pageSize: 10,
                pageList: [5, 10, 25, 50, 100, 200],
                search: true,
                showColumns: true,
                showRefresh: false,
                minimumCountColumns: 2,
                clickToSelect: false,
                showToggle: true,
                maintainSelected: true,
                columns: [{
                    field: 'state',
                    checkbox: true
                }, {
                    field: 'index',
                    title: '#',
                    align: 'right',
                    valign: 'bottom',
                    sortable: true
                }, {
                    field: 'id',
                    title: 'Item ID',
                    align: 'center',
                    valign: 'bottom',
                    sortable: true
                }, {
                    field: 'name',
                    title: 'Item Name',
                    align: 'center',
                    valign: 'middle',
                    sortable: true
                }, {
                    field: 'flag',
                    title: 'Flag',
                    align: 'center',
                    valign: 'middle'
                }]
            }
        };


    }, 2000);

异步加载数据的 BootstrapTable AngularJS 扩展不起作用

BootstrapTable AngularJS extension with data loaded async not working

angularjs

bootstrap-table