angularjsangular-ui-typeahead

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.


Solution

  • 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