Laden von JSON über AJAX mit NgTable-Parametern

Question

Ich versuche, ngTables zu verwenden, um Daten mithilfe eines AJAX-Aufrufs zu sortieren und zu filtern. Momentan bin ich in der Lage, die Daten mit einer ng-Wiederholung zu replizieren, aber keine meiner Sortierfunktionen trifft zu. Ich referenzierte dieses Beispiel http://plnkr.co/edit/zuzcma?p=info und konnte es mit einer mock.js-Datei zum Laufen bringen, aber im Moment benutze ich eine Datei, die ich auf meinen Webserver geladen habe und ich kann nicht scheinen, dass es funktioniert.

Ich bin mir sicher, die Antwort ist ziemlich einfach und schätze jede Hilfe. Ich habe mein Markup angehängt, um Ihnen zu zeigen, wie meine Controller- und HTML-Datei aussieht. Danke Ihnen allen und lassen Sie mich wissen, wenn Sie mehr Informationen benötigen!

Hier sind einige Links zu der API, die ich verweise.

http://bazalt-cms.com/ng-table/

http://bazalt-cms.com/ng-table/example/6

HTML:

<div ng-controller="myController"> 
    <table ng-table="tableParams" show-filter="true" class="table table-condensed"> 
    <tr ng-repeat="user in data"> 
     <td data-title="foo" sortable="foo">{{user.foo}}</td> 
     <td data-title="bar" sortable="bar">{{user.bar}}</td> 
    </tr> 
    </table> 
</div> 

Controller:

var app = angular.module('app', ['ngTable']); 

app.controller('myController', function($scope, $http, $filter, ngTableParams) { 

$http.get('http://jsondata.com/myjson.json') 
    .success(function(data, status) { 
    $scope.data = data; 
    }); 

$scope.tableParams = new ngTableParams({ 
    page: 1,   // show first page 
    count: 10,   // count per page 
    sorting: { 
     foo: 'asc'  // initial sorting 
    } 
}, { 
    total: data.length, // length of data 
    getData: function($defer, params) { 
     // use build-in angular filter 
     var orderedData = params.sorting() ? 
          $filter('orderBy')(data, params.orderBy()) : 
          data; 

     $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count())); 
    } 
    }); 
}); 

Answer 1

erste Schritt ist der pu t Anführungszeichen um Ihre sortierbar Attribut:

<td data-title="foo" sortable="'foo'">{{user.foo}}</td> 

ngTable einen Ausdruck erwartet dort.

Zweiter Schritt ist, welche Version von ngTable zu überprüfen, die Sie verwenden, und wenn es 0.3.2 Überprüfung dieses ngTable Ausgabe aus: https://github.com/esvit/ng-table/issues/204

Viel Glück)

Answer 2

$ benötigen verschieben innerhalb der zu lösenden getData, nachdem der Ajax-Aufruf abgeschlossen ist. Wie in dem Beispiel bereitgestellt Sie ist die Ajax-Aufruf innerhalb des getData:

var app = angular.module('app', ['ngTable']); 

app.controller('myController', function($scope, $http, $filter, ngTableParams) { 

$scope.tableParams = new ngTableParams({ 
    page: 1,   // show first page 
    count: 10,   // count per page 
    sorting: { 
     foo: 'asc'  // initial sorting 
    } 
}, { 
    total: data.length, // length of data 
    getData: function($defer, params) { 
     $http.get('http://jsondata.com/myjson.json') 
      .success(function(data, status) { 

       // use build-in angular filter 
       var orderedData = params.sorting() ? 
        $filter('orderBy')(data, params.orderBy()) : 
        data; 

       $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count())); 
      }); 
     } 
    }); 
}); 

Answer 3

Sie Problem ist, dass Sie die lokale Variable Daten in Ihrem ngTableParams und in der gleichen Zeit, die Sie nicht in den Anwendungsbereich der success Funktion sind verwenden.

Code auf etwas wie folgt ändern:

var app = angular.module('app', ['ngTable']); 

app.controller('myController', function($scope, $http, $filter, ngTableParams) { 

$http.get('http://jsondata.com/myjson.json') 
    .success(function(data, status) { 
    $scope.data = data; 

    $scope.tableParams = new ngTableParams({ 
     page: 1,   // show first page 
     count: 10,   // count per page 
     sorting: { 
      foo: 'asc'  // initial sorting 
     } 
    }, { 
     total: $scope.data.length, // length of data 
     getData: function($defer, params) { 
      // use build-in angular filter 
      var orderedData = params.sorting() ? 
           $filter('orderBy')($scope.data, params.orderBy()) : 
           $scope.data; 

      $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count())); 
     } 
     }); 
    }); 


}); 

die Änderung Siehe von data zu $scope.data innen ngTableParams.

Tipp: Wenn Sie nur geben Sie Ihre ngTableParams in Ihrem success Funktion auch funktionieren wird, ohne data zu $scope.data zu ändern. Aber wenn Sie die Variablen ändern, erhalten Sie eine bessere Flexibilität, wenn Sie Ihre Tabelle reload() möchten.

Answer 4

<tr ng-repeat="user in $data"> 
     <td data-title="foo" sortable="foo">{{user.foo}}</td> 
     <td data-title="bar" sortable="bar">{{user.bar}}</td> 
</tr> 

Sie können Daten direkt in Ihrem js keine Notwendigkeit, $scope.data = data verweisen. Ich habe versucht und gut für mich gearbeitet.