由 AngularJs 1 $http.get 填充的数据表说“表中没有可用数据”

Question

我正在尝试使用 angularjs 从 API 填充数据表，但问题是当我加载页面时，表格已填满，但底部显示“表格中没有可用数据”，如果我尝试排序，过滤器更换 nb。的显示所有数据都消失了，只显示“表中没有可用数据”。

HTML

<table id="example" ng-if="controls" datatable="ng" 
       class="table table-bordered bordered table-striped table-condensed datatable"
       ui-jq="dataTable"
       ui-options="dataTableOpt" >
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start Date</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="control in controls">
            <td>@{{control.train}}</td>
            <td>@{{control.time}}</td>
            <td>@{{control.location}}</td>
            <td>@{{control.case}}</td>
            <td>@{{control.quantity}}</td>
        </tr>
    </tbody>
</table> 

服务

(function () {
  var app = angular.module('mainApp');

  app.service('MyService', ['$http','$q', function ($http,$q) {

          this.getControls = function() {
            var def = $q.defer();

            $http.get("/api/control")
                .then(function(data) {
                    def.resolve(data);
                },function(error) {
                    def.reject(error);
                });
            return def.promise;
        }

  }]);
})();

控制器

(function () {

var app = angular.module('mainApp', ['ui.select2', 'ngAnimate', 'ngSanitize', 'toaster', 'ui.utils', 'ui.bootstrap']);
app.controller('ControlsController', ['$scope', '$filter', '$window', 'MyService', '$http', '$q', '$timeout', function ($scope, $filter, $window, MyService, $http, $q, $timeout) {

        $scope.controls = [];
        angular.element(document).ready(function () {
            MyService.getControls().then(function (result) {
                $scope.controls = result.data.data;
            });
        });


    }]);
})();

我尝试输入，ng-if，ng-show，超时，但它不起作用。 只有当我在控制器中声明一个包含所有值的数组时，才会显示该行并且过滤、搜索、工作。 是http请求相关的问题，创建DOM后加载数据但找不到解决办法。

有人可以帮助我吗？

Answer 1

您的代码对我来说很好用。确保服务返回的数据正确。根据您的代码，您需要服务返回的数据如下。

          data: {
            data: [{
              train: 'My Train',
              time: '19:00',
              location: 'Xyz Station',
              case: 'Case 1',
              quantity: '10'
            },{
              train: 'My Train 2',
              time: '11:00',
              location: 'Xyz2 Station',
              case: 'Case 2',
              quantity: '20'
            }]
          }

检查以下代码：我添加了 3 秒的超时时间来模拟对 Web 服务的调用。

(function() {
  var app = angular.module('mainApp', []);
  app.service('MyService', ['$http', '$q', function($http, $q) {

    this.getControls = function() {
      var def = $q.defer();

      setTimeout(
        () => {
          def.resolve({
            data: {
              data: [{
                train: 'My Train',
                time: '19:00',
                location: 'Xyz Station',
                case: 'Case 1',
                quantity: '10'
              }]
            }
          });
          console.log('resolved');
        }, 3000);

      return def.promise;
    }

  }]);
})();

(function() {
  var app = angular.module('mainApp');
  app.controller('ControlsController', ['$scope', '$filter', '$window', 'MyService', '$http', '$q', '$timeout', function($scope, $filter, $window, MyService, $http, $q, $timeout) {

    $scope.controls = [];
    angular.element(document).ready(function() {
      MyService.getControls().then(function(result) {       
        $scope.controls = result.data.data;
      });
    });
  }]);
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="mainApp">
  <div ng-controller="ControlsController">
    <table id="example" ng-if="controls" datatable="ng" class="table table-bordered bordered table-striped table-condensed datatable" ui-jq="dataTable" ui-options="dataTableOpt">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start Date</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="control in controls">
          <td>@{{control.train}}</td>
          <td>@{{control.time}}</td>
          <td>@{{control.location}}</td>
          <td>@{{control.case}}</td>
          <td>@{{control.quantity}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 2

代码由jQuery datatables制作的ui-jq="dataTable" ui-options="dataTableOpt"完成...

我的回答是：

{
    "data": [
        {
            "id": 34,
            "train": "25162",
            "time": "2020-01-23 00:00:00",
            "location": "test2 location",
            "case": "test1",
            "quantity": 1,
            "created_at": "2020-01-23 09:24:03",
            "updated_at": "2020-01-23 09:24:03"
        },
        {
            "id": 35,
            "train": "25162",
            "time": "2020-01-23 08:20:00",
            "location": "test2 location",
            "case": "test 2",
            "quantity": 1,
            "created_at": "2020-01-23 09:27:50",
            "updated_at": "2020-01-23 09:27:50"
        },
        {
            "id": 36,
            "train": "25162",
            "time": "2020-01-23 08:20:00",
            "location": "test 3 location",
            "case": "test 3",
            "quantity": 1,
            "created_at": "2020-01-23 08:30:27",
            "updated_at": "2020-01-23 08:30:27"
        }
    ]
}