CODEWITHSUNDEEP
angularjsangular-ui
Greg
Greg

Reputation: 2690

Angular UI typeahead not showing dropdown

I am trying to use the Angular UI typeahead. My problem is that the dropdown is not showing. The remote data is being called correctly and data is being returned... but the dropdown refuses to show...

<td colspan="5">
   <pre>Model: {{selected| json}}</pre>
   <input id="AutoCompleteDebtor" 
          type="text" 
          data-ng-model="selected" 
          data-typeahead="debtor for debtor in Debtors($viewValue)" 
          class="form-control input-sm" 
          placeholder="Enter 3 letters of Debtor Name" />
</td>

UPDATE: Ok - Its working well with array of string names but how do I do it with objects?

<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<title>Angular Typeahead</title>
<link href="Content/bootstrap/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/ui-bootstrap-tpls-0.6.0.min.js"></script>
<script>
    angular.module('myApp', ['ui.bootstrap'])
    .controller('SimpleController', function ($scope) {
        $scope.people = [
            { name: 'Alan', age: 23 },
            { name: 'Bruce', age: 24 },
            { name: 'Celine', age: 53 },
            { name: 'Dan', age: 43 },
            { name: 'Eric', age: 23 },
            { name: 'Freda', age: 47 },
            { name: 'Greg', age: 73 },
            { name: 'Hanna', age: 27 }
        ];
    });
</script>

</head>
<body data-ng-controller="SimpleController">
<div>
    <pre>Model: {{selected| json}}</pre>
    <input type="text" data-ng-model="selected" data-typeahead="name for name in people | filter:$viewValue | limitTo:8">
</div>
</body>
</html>

I have been following the https://github.com/angular-ui/bootstrap/tree/master/src/typeahead example

Upvotes: 5

Views: 7347

Answers (2)

Siva Raparla
Siva Raparla

Reputation: 104

I got my typeahead solved from Greg's answer. Here is what I did for my typeahead (hope this helps someone):

typeahead="i.t_UserName for i in employeeInfo | filter:$viewValue | limitTo:4" goes as an attribute of your html input

and in your controller (using employee resource)

$scope.employeeInfo = getEmployeeResourceSvc.getEmplInfo.query(function(response){
          $scope.employeeInfo= response;
});

Upvotes: 0

Greg
Greg

Reputation: 2690

I found the answer on this fiddle:http://jsfiddle.net/ukAc5/1/

data-typeahead="n.name for n in people

Upvotes: 1

Related Questions