CODEWITHSUNDEEP
angularjsangular-ui-bootstrapangular-ui
Felix
Felix

Reputation: 10078

Angular UI typeahead doesn't populate textbox upon selection

I am using Angular UI typeahead directive. I have a list of people that are in the typeahead dropbox. The list of people is an array of objects with properties like LastName, FirstName, CustomerNumber, etc. (Note, that my domain is completely different, and this is a simplification for clarity). Everything works fine if I have the following typeahead control:

<input type="text" ng-model="vm.selectedCustomer"
    typeahead-append-to-body="true"
    uib-typeahead="i.LastName for i in vm.lstCustomers | filter:$viewValue" />

However, I want to show more customer information in the typeahead dropbox. Let's say, I have a function in the controller:

vm.getFullName = function(customer) {
    return customer.LastName + ", " + customer.FirstName + " - " + customer.CustNumber;
    }

and corresponding directive:

<input type="text" ng-model="vm.selectedCustomer"
    typeahead-append-to-body="true"
    uib-typeahead="vm.getFullName(i) for i in vm.lstCustomers | filter:$viewValue" />

Once the selection is made, the model gets populated correctly; however text box shows undefined, undefined - undefined (curiously, the structure looks like getFullName() was applied to an empty value - with comma and dash).

If I go through every element of lstCustomers and apply getFullName(), everything looks fine again:

var lstCustomersFlat = [];
for (i = 0; i < vm.lstCustomers.length; i++) {
  var customer = vm.getFullName(vm.lstCustomers[i]);
  lstCustomersFlat.push(customer);
}

But I shouldn't have to do that, should I? Am I missing something, or I stumbled upon a bug?

Upvotes: 1

Views: 348

Answers (1)

Sampath
Sampath

Reputation: 65870

Please try as shown below.

<input type="text" ng-model="vm.selectedCustomer"
    typeahead-append-to-body="true"
    uib-typeahead="i as vm.getFullName(i) for i in vm.lstCustomers | filter:$viewValue" />

Upvotes: 1

Related Questions