Question

我正在实现一个输入，允许选择多个值作为标记。我正在使用 angular-ui-bootstrap-typeahead

以下带有虚拟数据的示例正常工作：

enter image description here

视图：

<script type="text/ng-template" id="form_field_ref">
 <div class='container-fluid' ng-controller="typeHeadTestCtrl">
     <input type="text" ng-model="selected"  typeahead="x.formatted_address for x in dynamicSearch($viewValue, field.displayName)"  class="form-control" typeahead-on-select='onSelect($item, field)'>
 </div>
</script>

控制器的一部分：

        $scope.getLocation = function(val) {
          return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
            params: {
              address: val,
              sensor: false
            }
          }).then(function(response){
            console.log(response);
            return response.data.results.map(function(item){
              console.log(item);
              //items attribute=> address_components, formatted_address, place_id....
              return item;

            });
          });
        };

但是当我尝试连接到我的实际数据时，我收到以下错误：

TypeError: Cannot read property 'length' of undefined
at ui-bootstrap-tpls.js:3637
at processQueue (angular.js:13170)
at angular.js:13186
at Scope.$eval (angular.js:14383)
at Scope.$digest (angular.js:14199)
at Scope.$apply (angular.js:14488)
at $$debounceViewValueCommit (angular.js:20944)
at $setViewValue (angular.js:20916)
at HTMLInputElement.listener (angular.js:19632)
at HTMLInputElement.eventHandler (angular.js:3011)

以下是失败的代码：

视图：

 <input type="text" ng-model="selected"  typeahead="x.theVal for x in dynamicSearch($viewValue, field.displayName)"  class="form-control" typeahead-on-select='onSelect($item, field)'>

控制器的各个部分：

dynamicSearch（）准备在调用getDbRefDocs（）时请求的数据：

        $scope.dynamicSearch = function(searchTerm, name) {
          var allowed = {};
          var classString = "";
          allowed = datamodel.classes[$routeParams.class].attribute[name].allowed;
          for (key in allowed){
            classString = classString +  key + "|";
          }
          //remove last pipeline
          classString = classString.slice(0, -1);
          $scope.getDbRefDocs(searchTerm, name, classString);
        };

        $scope.getDbRefDocs = function(searchTerm, name, classString) {
          var url = '/api/v2/docs/' + classString;
          return $http.get(url, {
            params: {
              '>displayName': searchTerm,
              count: 5                      
            }
          }).then(function(response){
            var data = response.data.data;
            console.log('data:'+data);
            var requested = [];
            angular.forEach(data.requested, function(searchTerm, k, o) {
               requested.push(createDBOifNecessary(searchTerm));
            });
            $scope.item=[];
            $scope.options=[];
            $scope.options[name] = [];
            for (key in requested) {
              if (requested.hasOwnProperty(key)) {
                //This is the storing value
                //console.log(requested[key].cid);
                //this is the display value
                //console.log(requested[key].attributes.displayName[0]);
                $scope.options[name][key] = requested[key].attributes.displayName[0];
                $scope.item.push({
                  'theName':requested[key].attributes.displayName[0], 
                  'theVal':requested[key].cid
                }); 
              } 
            }   
            console.log('item:'+$scope.item);
            return $scope.item;

          });
        };

最后一个console.log正确返回所需的数据！

对于我能够阅读的内容，问题与服务器请求的承诺有关......但我被卡住了！

Answer 1

我不确定失败的原因是因为我收到了预期的数据。

我认为有人提到它可能与操纵反应有关，推迟了......

我添加了一个事件触发器，用于更新typeahead属性读取的数组，现在可以正常工作。同样，typeahead-wait-ms是必需的，因为我的服务器响应在20到30ms之间，所以为了安全起见我把它设置为200ms。

工作代码：

view：显示数组的值＆＃34; item＆＃34;（item.theName == x.theName）

  <input type="text" ng-model="selected"  typeahead="x.theName for x in item" ng-change="dynamicSearch($viewValue, field.displayName)" typeahead-wait-ms="1000"  class="form-control" typeahead-on-select='onSelect($item, field)'>

控制器功能：

在ng-change上 - ＆gt; dynamicSearch（）=＆gt;定义什么数据请求并调用请求

$scope.dynamicSearch = function(searchTerm, name) {
  var allowed = {};
  var classString = "";
  allowed = datamodel.classes[$routeParams.class].attribute[name].allowed;
  for (key in allowed){
    classString = classString +  key + "|";
  }
  classString = classString.slice(0, -1);
  $scope.getDbRefDocs(searchTerm, name, classString);
};

随叫随到getDbRefDocs（）=＆gt;我为数组＆＃34; item＆＃34;

定义了值

$scope.getDbRefDocs = function(searchTerm, name, classString) {
  var url = '/api/v2/docs/' + classString;
  $http.get(url, {
    params: {
      '>displayName': searchTerm,
      count: 5                      
    }
  }).then(function(response){
    var data = response.data.data;
    var requested = [];
    angular.forEach(data.requested, function(searchTerm, k, o) {
       requested.push(createDBOifNecessary(searchTerm));
    });
    $scope.item=[];
    for (key in requested) {
      if (requested.hasOwnProperty(key)) {
        $scope.item.push({
          'theName':requested[key].attributes.displayName[0], 
          'theVal':requested[key].cid
        }); 
      } 
    }   
  });
};

从＆＃34; item＆＃34;的可用选项中选择项目时=＆GT; typeahead-on-select =＆＃39; onSelect（$ item，field）＆＃39; =＆GT;我存储item.theVal：

    $scope.onSelect = function (item, field) {
      field.theValues[field.theValues.length] = item.theVal;
    };

角度预先响应错误

1 个答案: