Usman Iqbal Usman Iqbal - 10 months ago 55
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">
<img ng-src="{{match.model.img}}" width="16"> {{}}

<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 for result in results | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" />

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

$scope.results = [{
name: "California",
img: ""
}, {
name: "Delaware",
img: ""
}, {
name: "Florida",
img: ""

Here is the link to jsfiddle

Answer Source

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 as the value of your ngModel and will filter your list by the property name of your result item value using the $viewValue.

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