BootstrapTable AngularJS扩展与异步加载不工作

我使用BootstrapTable AangularJS扩展名从here BootstrapTable AngularJS扩展与异步加载不工作

而且this plnkr数据显示例如与扩展使用。但是该示例使用了表格呈现之前生成的静态数据。但我试图使它与动态加载的数据一起工作（假设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>

感谢您的帮助。

来源

2017-10-17 indusBull

我想出了解决方案。一旦加载数据而不是初始化之前，我只需要执行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);

来源

2017-10-17 16:30:58 indusBull

BootstrapTable AngularJS扩展与异步加载不工作

回答

相关问题