[英]Angular ui typeahead from an array of objects - how to get the select value
I'm using typeahead angular bootstrap which is a very neat directive, but I'm encountering a difficulty to get the select value when using it with an array of objects (needed for a custom template ). 我正在使用typeahead角引导程序,这是一个非常整洁的指令,但是在将其用于对象数组(自定义模板所需)时,遇到了获取选择值的困难。 I can't get the typeahead selection value (it's displayed correctly but passed as [object object] to the target controller. 我无法获得预输入选择值(它正确显示,但作为[object object]传递给目标控制器。
this is the form: 形式如下:
<form ng-submit="startSearch(search.term , false, true)" novalidate>
<input typeahead-editable="true" typeahead="item as label(item) for item in startSearch($viewValue, true)| limitTo:10"
required type="text" class="searchInput" ng-model="search.term"
typeahead-template-url="views/search/typeahead.html" /> <!--| filter:$viewValue typeahead-on-select="goState(selectState(select), label(select)"-->
<button class="searchBT" ng-submit="startSearch(search.term , false, true)"><i class="icon-search"></i></button>
and the (relevant) controller: 和(相关的)控制器:
$scope.search = {};
$scope.startSearch = function(term, suggest, submitted){
var deferred = $q.defer();
if (submitted) {
console.log($scope.search)
$state.go('search.home',{'term': $scope.search.term }); //term gets [object object] instead of the displayed name
} else {
searchService.doSearch(term, suggest).then(function(data){
"use strict";
// console.log('data',data)
if (suggest){
deferred.resolve(data)
}
}, function(err){
"use strict";
$log.debug('err',err);
})
}
return deferred.promise;
}
};
$scope.label = function(item){
"use strict";
//select label
if (!item) {
return;
}
return item.symbol || (item.first_name +" " + item.last_name)
}
to summarize my problem: 总结一下我的问题:
I get a displayed value (and I get a correct one) from the typeahead select list it seems not to update the model (search.term) correctly and I get some [object object] result there. 我从预先选择列表中得到了一个显示的值(并且我得到了一个正确的值),似乎无法正确更新模型(search.term),并且在那里得到了一些[object object]结果。 If I manually type a value in the input field and submit I do get a correct value (and state transition etc..) 如果我在输入字段中手动输入一个值并提交,我会得到一个正确的值(以及状态转换等)。
to make things a little more complicated, the list contains different kind of objects so I to handle some logic about the object with a function/filter and can't just grab a field 为了使事情更复杂一点,列表包含了不同种类的对象,因此我使用函数/过滤器来处理关于对象的一些逻辑,而不能仅仅获取字段
Thanks for the help! 谢谢您的帮助!
I think this may be that you are missing a property name off of the object. 我认为这可能是因为您缺少该对象的属性名称。 I have written a plunk based on your code here . 我在这里根据您的代码编写了代码。 I have just stripped back the service calls to be a hard-coded array. 我刚刚将服务调用剥离为一个硬编码数组。
Pay particular attention to the object that is returned has a "Value" and "Text" property. 请特别注意所返回的对象具有“值”和“文本”属性。
var results = [];
angular.forEach([{Val: 1, Text: "AngularJS"}, {Val: 2, Text: "EmberJS"}, {Val: 3, Text: "KnockoutJS"}], function(item){
if (item.Text.toLowerCase().indexOf(term.toLowerCase()) > -1) {
results.push(item);
}
});
return results;
And also look in the markup at the way the "typeahead" attribute is populated using the actual text property of the object: 并在标记中查看使用对象的实际text属性填充“ typeahead”属性的方式:
typeahead="item.Text for item in startSearch($viewValue)| limitTo:10"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.