Usman Iqbal Usman Iqbal - 1 month ago 7
AngularJS Question

Angular Js- Why on click the value is not selected?

I am implementing a typeahead with an image in the dropdown the problem is when i click the item in the dropdown it does not get selected.

<body ng-app="TypeaheadDemo">
<script type="text/ng-template" id="customTemplate.html">
<a>
<img ng-src="{{match.model.img}}" width="16"> {{match.model.name}}
</a>
</script>

<div class="container-fluid" ng-controller="TypeaheadCtrl">
<h1>Angular UI Bootstrap Typeahead</h1>
<input type="text" ng-model="query" class="form-control" typeahead="name as result.name for result in results | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" />
</div>
</body>

angular.module("TypeaheadDemo", ['ui.bootstrap'])
.controller('TypeaheadCtrl', ['$scope', function($scope) {

$scope.results = [{
name: "California",
img: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flag_of_California.svg/45px-Flag_of_California.svg.png"
}, {
name: "Delaware",
img: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/Flag_of_Delaware.svg/45px-Flag_of_Delaware.svg.png"
}, {
name: "Florida",
img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Flag_of_Florida.svg/45px-Flag_of_Florida.svg.png"
}];
}]);


Here is the link to jsfiddle http://jsfiddle.net/pqe3pf89/

Answer

Your expression is being built incorrectly, you can use select as if you like but not that way. The way you are doing so, is selecting nothing to your model.

To get your code working you can change your expression to look like the code bellow: it will select result.name as the value of your ngModel and will filter your list by the property name of your result item value using the $viewValue.

typeahead="result.name for result in results | filter:{name: $viewValue}"