Search code examples
angularjstwitter-bootstrapangular-ui-bootstrapangular-uiangular-ui-typeahead

Text value not displayed when item selected with help of typeahead

I use typeahead in my angularjs project.

I hava this value to be displayed in textbox with typeahead attribute:

  $scope.cities = [{id:1,address:'Berlin'},
                   {id:2,address:'Bonn'},
                   {id:3,address:'London'},
                   {id:4,address:'Miami'}];

And here is input text box with typeahead attribute:

<input type="text" ng-model="selected" typeahead="state.abbreviation as state.name for state in states | filter:$viewValue | limitTo:8">

But the problem that when item is selected the id of the value displayed and not the address.

Here is the planker.

I want the address to be displayed in text box and id value to save in selected variable.How fix the prblem?

Solution

  • Try this one (run code snippet):

    angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TypeaheadCtrl', function($scope, $http) {

  $scope.cities = [{id:1, address:'Berlin'},
							  {id:2,address:'Bonn'},
               {id:3,address:'London'},
               {id:4,address:'Miami'}];
               
});
    <!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<style>
  .typeahead-demo .custom-popup-wrapper {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    background-color: #f9f9f9;
  }

  .typeahead-demo .custom-popup-wrapper > .message {
    padding: 10px 20px;
    border-bottom: 1px solid #ddd;
    color: #868686;
  }

  .typeahead-demo .custom-popup-wrapper > .dropdown-menu {
    position: static;
    float: none;
    display: block;
    min-width: 160px;
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
</style>

<div class='container-fluid typeahead-demo' ng-controller="TypeaheadCtrl">

    <h4>Custom templates for results</h4>
   <pre> Id: {{city.id}}</pre>
   <pre>Model: {{city | json}}</pre>
    
    <input type="text" 
    ng-model="city" 
    placeholder="Custom template" 
   
    uib-typeahead="city as city.address for city in cities | filter:$viewValue"
    class="form-control"  
    typeahead-show-hint="true" 
    typeahead-min-length="0"/>
    
   </div>
  </body>
</html>