Question

我正在使用带有angularjs的bootsrap typehead，链接http://angular-ui.github.io/bootstrap/

在我的控制器中

 $scope.getUser = function(val) {
        //alert("hi");
         return $http.get('user/getUserNames.do', {
              params: {
                userName: val,

              }
            }).then(function(response){

              return response.data;


            });


          };

我的HTML代码

<input type="text" ng-model="asyncSelected"  typeahead-wait-ms="300" typeahead="user for user in getUser($viewValue)"  class="form-control">

如果删除警报，则打印头将无法正常工作

如果我保留警报，则打印头只能在chrome

中使用

如果我在“return $ http.get（'user / getUserNames.do'”中放置一个断点并使用火虫它在firefox中运行

我从服务器

收到此结构['name1'，'name2']中的数据有人请帮忙

提前致谢

Answer 1

那是因为关闭警报所花费的时间是收到异步数据。你应该将数据存储在$ scope而不是在$ scope

上调用一个函数

   $scope.users= {};
   $scope.getUser = function(val) {

     return $http.get('user/getUserNames.do', {
          params: {
            userName: val,

          }
        }).then(function(response){

          $scope.users=  response.data;


        });


      };

HTML

  <input type="text" ng-model="asyncSelected"  ng-change="getUser($viewValue)"
  typeahead-wait-ms="300" typeahead="user for user in users"  class="form-control">

Answer 2

你的鳕鱼逻辑是不正确的，你不能从异步函数返回那些需要时间来完成的数据，

不要从此getUser函数返回任何内容。你有2个选择：

1 - 将responce.data存储在稍后要使用的全局变量中

$scope.users = [];
$scope.getUser = function (val) {
    $http.get('user/getUserNames.do', {
        params: {
            userName: val
        }
    }).then(function (response) {
        $scope.users.push(response.data);
    });
};

2 - 在get功能完成时调用另一个函数来处理已恢复的数据

$scope.getUser = function (val) {
    $http.get('user/getUserNames.do', {
        params: {
            userName: val
        }
    }).then(function (response) {
        $scope.userLoaded(response.data);
    });
};

Answer 3

通过angular-ui-bootstrap中的简单hack解决了问题

..........前

 var getMatchesAsync = function(inputValue) {

        var locals = {$viewValue: inputValue};
        isLoadingSetter(originalScope, true);
        $q.when(parserResult.source(originalScope, locals)).then(function(matches) {

          //it might happen that several async queries were in progress if a user were typing fast
          //but we are interested only in responses that correspond to the current view value
          var onCurrentRequest = (inputValue === modelCtrl.$viewValue);
          if (onCurrentRequest && hasFocus) {
            if (matches.length > 0) {

              scope.activeIdx = focusFirst ? 0 : -1;
              scope.matches.length = 0;

              //transform labels
              for(var i=0; i<matches.length; i++) {
                locals[parserResult.itemName] = matches[i];
                scope.matches.push({
                  id: getMatchId(i),
                  label: parserResult.viewMapper(scope, locals),
                  model: matches[i]
                });
              }

              scope.query = inputValue;
              //position pop-up with matches - we need to re-calculate its position each time we are opening a window
              //with matches as a pop-up might be absolute-positioned and position of an input might have changed on a page
              //due to other elements being rendered
              scope.position = appendToBody ? $position.offset(element) : $position.position(element);
              scope.position.top = scope.position.top + element.prop('offsetHeight');

              element.attr('aria-expanded', true);
            } else {
              resetMatches();
            }
          }
          if (onCurrentRequest) {
            isLoadingSetter(originalScope, false);
          }
        }, function(){
          resetMatches();
          isLoadingSetter(originalScope, false);
        });
      };

我刚刚删除了'＆amp;＆amp; hasFocus'来自代码的这个sipneet

........

var getMatchesAsync = function(inputValue) {

            var locals = {$viewValue: inputValue};
            isLoadingSetter(originalScope, true);
            $q.when(parserResult.source(originalScope, locals)).then(function(matches) {

              //it might happen that several async queries were in progress if a user were typing fast
              //but we are interested only in responses that correspond to the current view value
              var onCurrentRequest = (inputValue === modelCtrl.$viewValue);
              if (onCurrentRequest) {
                if (matches.length > 0) {

                  scope.activeIdx = focusFirst ? 0 : -1;
                  scope.matches.length = 0;

                  //transform labels
                  for(var i=0; i<matches.length; i++) {
                    locals[parserResult.itemName] = matches[i];
                    scope.matches.push({
                      id: getMatchId(i),
                      label: parserResult.viewMapper(scope, locals),
                      model: matches[i]
                    });
                  }

                  scope.query = inputValue;
                  //position pop-up with matches - we need to re-calculate its position each time we are opening a window
                  //with matches as a pop-up might be absolute-positioned and position of an input might have changed on a page
                  //due to other elements being rendered
                  scope.position = appendToBody ? $position.offset(element) : $position.position(element);
                  scope.position.top = scope.position.top + element.prop('offsetHeight');

                  element.attr('aria-expanded', true);
                } else {
                  resetMatches();
                }
              }
              if (onCurrentRequest) {
                isLoadingSetter(originalScope, false);
              }
            }, function(){
              resetMatches();
              isLoadingSetter(originalScope, false);
            });
          };

AngularJs + Bootstrap + Typeahead + Ajax仅在我放置警告框但仅在chrome中工作时才有效

3 个答案: