Menu
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
703
I found the answer on this fiddle:http://jsfiddle.net/ukAc5/1/
data-typeahead="n.name for n in people
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With