Question

我正在使用typeahead angular bootstrap这是一个非常简洁的指令，但是当我将它与一个对象数组（自定义模板所需）一起使用时，我遇到了难以获得选择值的问题。我无法获得预先选择值（它正确显示但作为[对象对象]传递给目标控制器。

这是表格：

<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>

和（相关）控制器：

$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)
        }

总结我的问题：

我从typeahead选择列表中得到一个显示值（我得到一个正确的值）似乎没有正确更新模型（search.term）并且我得到了一些[object object]结果。如果我在输入字段中手动输入一个值并提交，我会得到一个正确的值（以及状态转换等。）

为了使事情变得更复杂，列表包含不同类型的对象，所以我用函数/过滤器来处理关于对象的一些逻辑，而不能只是抓住一个字段

感谢您的帮助！

Answer 1

我认为这可能是您缺少对象的属性名称。我根据你的代码here编写了一个plunk。我刚刚将服务调用剥离为硬编码数组。

特别注意返回的对象具有“Value”和“Text”属性。

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;

还可以使用对象的实际text属性填充“typeahead”属性的方式查看标记：

typeahead="item.Text for item in startSearch($viewValue)| limitTo:10"

来自对象数组的Angular ui typeahead - 如何获取选择值

1 个答案: