akila arasan
akila arasan

Reputation: 747

Angular Typeahead results shows undefined

I have been learning Angular and tried to implement it in a mock up.When I tried to implement Angular typeahead ,the results of typeahead is shown as undefined can anyone suggest me where I am going wrong? The code snippet of html,

 <input type="text" id="search" ng-model = "selectedEnterprise" class="form-control form-design input-md enable collapse" placeholder="search for an enterprise" uib-typeahead = "enterprise.name as vm.enterprises.name for enterprise in vm.enterprises | filter:$viewValue | limitTo : 3 ">

The controller code snippet

 $http.get(path + '/enterprise/all/' + num)
                    .then(function success(response) {
                        vm.enterprises = response.data;
                        temp = vm.enterprises;
                        console.log(vm.enterprises);
                    }, function error(response) {
                        console.log(response);
                    });

I use MongoDB and NodeJS framework for Backend.

Upvotes: 0

Views: 843

Answers (2)

Ravi Teja
Ravi Teja

Reputation: 1107

Instead of

uib-typeahead = "enterprise.name as vm.enterprises.name for enterprise in vm.enterprises | filter:$viewValue | limitTo : 3

Expression should be like

uib-typeahead = "name as enterprise.name for enterprise in vm.enterprises | filter:$viewValue | limitTo : 3

You should refer to particular instance enterprise.name rather than all the instances vm.enterprises.name

Upvotes: 0

ngCoder
ngCoder

Reputation: 2105

Change your typeahead code

From

<input type="text" id="search" ng-model = "selectedEnterprise" class="form-control form-design input-md enable collapse" placeholder="search for an enterprise" uib-typeahead = "enterprise.name as vm.enterprises.name for enterprise in vm.enterprises | filter:$viewValue | limitTo : 3 ">

To

<input type="text" id="search" ng-model = "selectedEnterprise" class="form-control form-design input-md enable collapse" placeholder="search for an enterprise" uib-typeahead = "enterprise.name as enterprise.name for enterprise in vm.enterprises | filter:$viewValue | limitTo : 3 ">

In the typeahead,we are creating an reference object enterprise for vm.enterprises(data source) and from that reference object we are extracting name variable and asking it to assign the same to ng-model

uib-typeahead = "enterprise.name as enterprise.name for enterprise in vm.enterprises

Upvotes: 3

Related Questions