Question

我正在使用bootstrap ui typeahead。因此，当用户输入我想要异步加载数据时。所以我创建了一个工厂，它有一个http req来获取数据。

angular.module('customers').controller('CustomersController', ['$scope', function($scope){
        $scope.searchUser = function(val) {
            searchUser.getUsers(val, $scope.searchField, $scope.searchPattern, $scope.displayCount).then(function(response){
                    // console.log(response.data
                    return response.data
                });
            }
    }]).factory('searchUser', ['$http', function($http) {
            return {
                getUsers: function(val, callback){
                    return $http({
                        url: '/search/user/' + val,
                        method: 'GET'
                    })
                }
            }
        }]);

HTML：

<input type="text" ng-model="selectedUser" placeholder="Search User" typeahead="user.firstname for user in searchUser($viewValue) | filter:{firstname:$viewValue}" typeahead-on-select="onSearchItemSelect($item, $model, $label)" class="form-control">

但我继续收到以下错误

TypeError：无法读取未定义的属性“长度”   在ui-bootstrap-tpls.js：3186
      在m.promise.then.u（angular.js：11319）
      在m.promise.then.u（angular.js：11319）
      在angular.js：11405
      at h.a. $ get.h. $ eval（angular.js：12412）
      at h.a. $ get.h. $ digest（angular.js：12224）
      at h.a. $ get.h. $ apply（angular.js：12516）
      在HTMLInputElement.l（angular.js：16632）
      在HTMLInputElement.jQuery.event.dispatch（jquery.js：4409）
      在HTMLInputElement.jQuery.event.add.elemData.handle（jquery.js：4095）

我几乎尝试了stackoverflow上接受的所有答案。但是我得到了同样的错误。

修改仅供参考：我尝试更改功能名称（因为功能和工厂名称相同），但没有帮助。如果我在控制台中记录了函数中的response.data，我可以看到返回的输出，但它不会返回到前面的类型。

实际上，以下代码无需创建工厂即可运行。但问题是，当我转到加载相同控制器的不同页面时，此承诺会自动继续获取导致页面冻结的请求。

$scope.searchUser = function(val) {
    return $http.get('/search/user/' + val)
    .then(function(response){
        return response.data
    })
}

Answer 1

你不应该以这种方式使用limitTo过滤器，首先应该向控制器注入$ filter依赖项，然后使用limitTo过滤器

应该像

$filter('limitTo')(input, limit, begin)

<强>代码

.controller('CustomersController', ['$scope', '$filter', function($scope, $filter) {
    $scope.searchUser = function(val) {
      return $http.get('/search/user/' + val)
        .then(function(response) {
          return $filter('limitTo')(response.data, 10);
        });
    }
}]).

Bootstrap ui typeahead async not working

1 个答案: