Я получаю TypeError: не могу вызвать метод «срез» неопределенного при загрузке данных с фабрики ng-Table AngularJS

Question

Я новичок в AngularJS и застрял в отображении данных при использовании ng-Table, исходящих из службы. Я получаю сообщение об ошибке

TypeError: Невозможно вызвать метод 'срез' неопределенной на объекте $ scope.tableParams.ngTableParams.getData. (Index.html: 122: 32)

Когда я жестко закодированное значения json-данных работают нормально. Я думаю, что данные с завода содержали больше, чем просто данные json, поэтому проблема с нарезкой.

Мой контроллер выглядит следующим образом:

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 
    }); 

}); 

Тогда мой завод сервис это:

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); 
       }); 
     } 
    } 
}); 

Мой HTML заключается в следующем:

<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

Вы должны решить $defer в таблице getData после завершения ajax. Поскольку он стоит прямо сейчас, если вы должны войти в систему filteredData для консоли, он не будет определен, поэтому его нельзя будет нарезать.

Попробуйте переставить userData.getUsers к:

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())); 

    }) 

}