CODEWITHSUNDEEP
angularjsdropdowntypeahead
Usman Iqbal
Usman Iqbal

Reputation: 2429

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/

Upvotes: 0

Views: 30

Answers (2)

lenilsondc
lenilsondc

Reputation: 9800

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}"

Upvotes: 1

GPicazo
GPicazo

Reputation: 6676

@Lenilson de Castro is correct, but that will only bind $scope.query to the selected result's name property... that is "California", "Florida", ...

If you would like to bind $scope.query to the complete result object, you can use:

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

Upvotes: 1

Related Questions