AngularJS dataTable，$ http獲取不起作用

Question

當我從$http.get ng-repeat對象ng-repeat時，angularJS中的數據表不起作用。 （第一個表有效，第二個表無效） https://codepen.io/bafu2203/pen/VzBVmy

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.records;
                console.log($scope.test);
                $timeout($scope.getapi, 1000);
            }, function errorCallback(response) {
                console.log(response);
                console.log('error');
            });

    };
    $scope.getapi();


  $scope.data={ "records":[ {"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"}, {"Name":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"Mexico"}, {"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"}, {"Name":"Around the Horn","City":"London","Country":"UK"}, {"Name":"B's Beverages","City":"London","Country":"UK"}, {"Name":"Berglunds snabbköp","City":"Luleå","Country":"Sweden"}, {"Name":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"}, {"Name":"Blondel père et fils","City":"Strasbourg","Country":"France"}, {"Name":"Bólido Comidas preparadas","City":"Madrid","Country":"Spain"}, {"Name":"Bon app'","City":"Marseille","Country":"France"}, {"Name":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"}, {"Name":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"}, {"Name":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"}, {"Name":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"}, {"Name":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"} ] }



$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

使API調用一次 。 然后將其添加到和對象或數組。 然后過濾該對象/數組。 現在看來，每次按任何過濾功能時，您都在進行Api調用。 使它在api函數外部可訪問。

//Outside function
$scope.testData = {};

//Inside
$scope.testdata = data.data.records;

Answer 2

這就是為什么您應該使用angular dataTables的原因 。 AngularJS和jQuery dataTables最終陷入了一場他們都試圖操縱DOM的競賽，而一個人卻不知道另一個人在做什么，甚至不存在。 angular-ui-jq不能解決這個問題，它基本上只是在任意點執行$('table').DataTable() 。

您可以將簡單的dataTable與angular一起實現，但是一旦使用多個表或更高級的dataTables東西，整個設置就會中斷。 Angular dataTables是包裝在指令中的jQuery dataTables，因此它們實際上可以在角度環境中工作。

您的代碼可以很容易地重構為

$scope.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
   var defer = $q.defer();
   $http.get('https://www.w3schools.com/angular/customers_mysql.php').then(function(result) {
     defer.resolve(result.data.records);
   });
   return defer.promise;
 })    
 .withOption('lengthMenu', [[10, 50, 100,-1], [10, 50, 100,'All']]);

$scope.dtColumns = [       
  DTColumnBuilder.newColumn(null).withTitle('#').renderWith(function(data, type, full, meta) {
     return meta.row + 1
  }),  
  DTColumnBuilder.newColumn('Name').withTitle('name'),
  DTColumnBuilder.newColumn('City').withTitle('position')
]       

標記

<table datatable
   dt-options="dtOptions" 
   dt-columns="dtColumns">
</table>

演示-> http://plnkr.co/edit/sca9WflpKNn2EIYct0EL?p=preview

如果使用datatable="ng" ，則可以使用ng-repeat 進行渲染，但是不建議這樣做，因為與dataTables優化渲染相比，它要慢得多。

---

如果您對dtColumns構造感到困惑，則可以改用舊的dataTables columns ：

$scope.dtColumns = [       
  { data: null, title: '#', 
    render: function(data, type, full, meta) {
     return meta.row + 1
    })
  },
  { data: 'Name', title: 'Name' },
  { data: 'City', title: 'City' }
]