javascript - 带有 AngularJS 的数据表 $http.get

Question

我不想在 angularJS 中使用 bootstrap 数据表 - 这是我的代码:https://codepen.io/bafu2203/pen/VzBVmy

如您所见，当我想从 $http.get 调用中列出表数据时，该表不起作用。但是当我从 $scope.data

ng-repeat 时，效果很好

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:

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

提前感谢您的回答!

Answer 1

您必须像这样访问它的数据:

$scope.test = data.data.records;