AngularJS dataTable，$ http get不起作用

angularJS中的數據表不起作用當我ng-repeat對象從$http.get這裏是前。（第一個表的作品，第二個表不工作）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 
    ], 
    }; 
});

來源

2017-08-25 bafix2203

什麼「不工作」？兩張桌子都很適合我。他們都充滿了數據。爲什麼這個問題甚至得到upvotes？ –

過濾不起作用 – bafix2203

使API調用一個時間。然後將其添加到對象或數組中。然後過濾該對象/數組。現在看來你每次按任何過濾函數都會進行Api調用。讓它可以在api函數之外訪問。

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

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

來源

2017-08-25 11:10:48 Rad

這就是爲什麼你應該使用angular dataTables。 AngularJS和jQuery數據表最終在他們都嘗試操縱DOM的競賽中，而且他們並不知道其他人在做什麼，甚至是否存在。 angular-ui-jq沒有解決這個問題，它基本上只是在某個任意點執行$('table').DataTable()。

你可以實現一個簡單的數據表和角度，但儘快使用多個表或更多花式dataTable的東西整個設置將打破。 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

您可以渲染ng-repeat如果使用datatable="ng"，但這不值得推薦因爲它比dataTables優化的渲染慢得多。

如果您在dtColumns結構弄糊塗，你可以用好老的DataTable columns代替：

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

來源

2017-08-25 12:49:51 davidkonrad

AngularJS dataTable，$ http get不起作用

回答

相關問題