Ich erhalte TypeError: Kann nicht Methode 'Scheibe' von undefined beim Laden von Daten aus der Fabrik ng-Tabelle AngularJS

Question

Ich bin neu in AngularJS und blieb bei der Anzeige der Daten bei der Verwendung ng-Table aus einem Service. Ich erhalte einen Fehler

Typeerror: Die Methode kann nicht 'Scheibe' nennt undefinierter bei Object $ scope.tableParams.ngTableParams.getData. (Index.html: 122: 32)

Wenn ich hartcodiert Die JSON-Datenwerte funktionieren einwandfrei. Ich denke, die Daten aus der Fabrik enthalten mehr als nur die JSON-Daten, daher das Problem mit dem Slicing.

Mein Controller sieht aus wie:

myApp.controller('usersCtrl', function usersCtrl($scope, userData, $filter, ngTableParams, $log){ 

    userData.getUsers(function(users){ 
     $scope.users = users; 
    }) 

    var users = $scope.users; 

    $scope.$watch("filter.$", function() { 
     $scope.tableParams.reload(); 
    }); 

    $scope.tableParams = new ngTableParams({ 
     page: 1,   // show first page 
     count: 10,   // count per page 
     sorting: { 
      name: 'asc'  // initial sorting 
     } 
    }, { 
     getData: function($defer, params) { 
      var filteredData = $filter('filter')(users, $scope.filter); 
      var orderedData = params.sorting() ? 
           $filter('orderBy')(filteredData, params.orderBy()) : 
           filteredData; 

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

}); 

Dann ist dieses mein Werk Service ist:

myApp.factory('userData', function($http, $log){ 
    return { 
     getUsers: function(successcb){ 
      $http({method: 'GET', url: 'api/users'}). 
       success(function(data, status, headers, config){ 
        successcb(data); 
        $log.warn(data, status, headers, config); 
       }). 
       error(function(data, status, headers, config){ 
        $log.warn(data, status, headers, config); 
       }); 
     } 
    } 
}); 

Mein HTML ist dies:

<div class="row"> 
    <div> 
     <p>Filter: <input class="form-control" type="text" ng-model="filter.$" /></p> 

     <table ng-table="tableParams" class="table"> 
      <tr ng-repeat="user in $data"> 
       <td data-title="'Name'" sortable="name"> 
        {{user.name}} 
       </td> 
       <td data-title="'Age'" sortable="'age'"> 
        {{user.age}} 
       </td> 
      </tr> 
     </table> 
    </div> 
</div> 

Answer 1

Sie müssen $defer innerhalb der Tabelle lösen getData nach dem ajax abgeschlossen. So wie es jetzt aussieht, wenn Sie filteredData zur Konsole loggen, wird es undefiniert sein, also kann es nicht geschnitten werden.

Versuchen userData.getUsers zu bewegen:

getData: function ($defer, params) { 
    /* make ajax call */ 
    userData.getUsers(function(users) { 
     /* now we have data to work with*/ 
     $scope.users = users; 

     var filteredData = $filter('filter')(users, $scope.filter); 
     var orderedData = params.sorting() ? $filter('orderBy')(filteredData, params.orderBy()) : filteredData; 
     /* and can resolve table promise */ 
     $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count())); 

    }) 

}