Angular ui typeahead from an array of objects - how to get the select value

Question

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 ). I can't get the typeahead selection value (it's displayed correctly but passed as [object object] to the target controller.

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

Answer 1

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:

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