Angular typeahead异步结果-接收错误“TypeError:无法使用'in'运算符搜索... in ...”
Posted
技术标签:
【中文标题】Angular typeahead异步结果-接收错误“TypeError:无法使用\'in\'运算符搜索... in ...”【英文标题】:Angular typeahead asynchronous results - receiving error "TypeError: Cannot use 'in' operator to search for ... in ..."Angular typeahead异步结果-接收错误“TypeError:无法使用'in'运算符搜索... in ...” 【发布时间】:2016-05-13 06:41:28 【问题描述】:我已经为 Angular UI typeahead 字段制定了指令。我正在尝试对其进行设计,以便在用户键入时,它会发送异步后端调用以获取将填充出现的下拉列表的结果,如Angular-bootstrap docs, example 2 所示。但是,当我开始输入(在这种情况下为“a”)时,出现错误:
TypeError: Cannot use 'in' operator to search for 'getters' in a
这是进行 REST 调用的工厂方法:
certFactory.getUsersWithMatchingUsername = function(username)
return $http.get(urlBase + '/managed/user?_queryFilter=userName+co+' + '\'' + username + '\'', timeout: timeoutLength)
.then(function(response)
// success
return response.data;
, function(response)
// error
return $q.reject(response);
);
;
这里是调用工厂方法的控制器方法:
$scope.getters =
getUsersWithUsername: function (username)
certFactory.getUsersWithMatchingUsername(username)
.then(function (response)
var users = [];
angular.forEach(response.result, function(item)
users.push(item);
)
return users;
, function (error)
console.log('failed!')
)
这是我的指令:
angular.module('myApp')
.directive('dropdownsearch', function()
return
restrict: 'E',
transclude: true,
scope:
getterFn: '&',
config: '=', // object with properties label and type
disabled: '=?ngDisabled',
required: '=?ngRequred',
ngModel: '=',
options: '='
,
require: ['^form', 'ngModel'],
templateUrl: 'views/templates/dropdownSearchView.html',
replace: true,
link: function(scope, iElm, iAttrs, controller)
if (iAttrs.required !== undefined)
// If attribute required exists
// ng-required takes a boolean
scope.required = true;
if (iAttrs.readonly !== undefined)
// If attribute required exists
// ng-required takes a boolean
scope.readonly = true;
);
这是指令模板:
<div class="form-group has-feedback">
<label class="control-label"> Choose config.type ></label>
<div class="dropdown dropdown">
<div class="input-group">
<input
type="text"
class="form-control"
placeholder="Make selection"
ng-model="ngModel"
uib-typeahead="option as option[config.label] for option in getterFn($viewValue)"
typeahead-editable="false"
ng-required="required"
ng-disabled="disabled"
/>
</div>
</div>
</div>
最后,这是我的使用中的指令:
<dropdownsearch ng-show= 'fieldMethods.showSubfield(subfield)'
getter-fn="getters.getUsersWithUsername"
ng-model="subsubfield.value"
config="fieldMethods.getConfig(subfield)">
</dropdownsearch>
任何帮助将不胜感激。另外,如果需要任何其他信息,请告诉我。
【问题讨论】:
【参考方案1】:UI Bootstrap 网站 Asynchronous Typeahead 示例使用 uib-typeahead="address for address in getLocation($viewValue)"
。我的猜测是你的错误信息是说它在指令中期待for
,而不是as
。我不明白这一点,所以我可能是错的! :-)
【讨论】:
以上是关于Angular typeahead异步结果-接收错误“TypeError:无法使用'in'运算符搜索... in ...”的主要内容,如果未能解决你的问题,请参考以下文章
Angular框架中的父子组件通信传递异步的数据接收值异常的问题(Async Data)
Angular 9:一种形式的多个 ngb-typeahead?
Angular UI/bootstrap typeahead 显示“错误:无控制器:ngModel”错误
在 angular bootstrap ui typeahead 指令上触发 keypress 事件
html angular-ui-bootstrap Typeahead的示例用法(https://angular-ui.github.io/bootstrap/)