數據表與AngularJS $ http.get

Question

我wan't使用引導數據表與angularJS - 這裏是我的代碼：https://codepen.io/bafu2203/pen/VzBVmy

正如你看到的，當我想從$表DATAS列出http.get打電話時，表不起作用。提前

var app=angular.module('formvalid', ['ui.bootstrap','ui.utils']); 
app.controller('validationCtrl',function($scope, $http, $timeout){ 
    $scope.getapi = function(){ 
     $http({ 
      method: 'GET', 
      url: 'https://www.w3schools.com/angular/customers_mysql.php', 
     }) 
      .then(function successCallback(data) { 
       $scope.test = data.data; 
       console.log($scope.test); 
       $timeout($scope.getapi, 1000); 
      }, function errorCallback(response) { 
       console.log(response); 
       console.log('error'); 
      }); 

    }; 
    $scope.getapi(); 


    $scope.data=[ 
    { 
    "name" : "Tiger Nixon", 
    "system" : "System Architect" 
    }, 
    { 
    "name" : "Tiger asd", 
    "system" : "System Architect" 
    }, 
    { 
    "name" : "Tiger d", 
    "system" : "System gadfadgf" 
    }, 
    { 
    "name" : "Tiger Nixon", 
    "system" : "gadsf Architect" 
    }, 
    { 
    "name" : "Tiger Nixon", 
    "system" : "asdd Architect" 
    } 
]; 



$scope.dataTableOpt = { 
    //custom datatable options 
    // or load data through ajax call also 
    "aLengthMenu": [[10, 50, 100,-1], [10, 50, 100,'All']], 
    "aoSearchCols": [ 
     null 
    ], 
    }; 
}); 

感謝答案：但它工作的偉大，當我從ng-repeat$scope.data

HTML：

<div class="container" ng-app="formvalid"> 
    <div class="panel" data-ng-controller="validationCtrl"> 
    <div class="panel-heading border">  
    <h2>Data table using jquery datatable in Angularjs 
    </h2> 
    </div> 
    <div class="panel-body"> 
     <table class="table table-bordered bordered table-striped table-condensed datatable" ui-jq="dataTable" ui-options="dataTableOpt"> 
     <thead> 
     <tr> 
      <th>#</th> 
      <th>Name</th> 
      <th>Position</th> 

     </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="n in data"> 
      <td>{{$index+1}}</td> 
      <td>{{n.name}}</td> 
      <td>{{n.system}}</td> 

      </tr> 
     </tbody> 
    </table> 

    <table class="table table-bordered bordered table-striped table-condensed datatable" ui-jq="dataTable" ui-options="dataTableOpt"> 
     <thead> 
     <tr> 
      <th>#</th> 
      <th>Name</th> 
      <th>Position</th> 

     </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="n in test"> 
      <td>{{$index+1}}</td> 
      <td>{{n.Name}}</td> 
      <td>{{n.City}}</td> 

      </tr> 
     </tbody> 
    </table> 
    </div> 
</div> 
</div> 

JS！

Answer 1

你要訪問它像這樣的數據：

$scope.test = data.data.records;