在 typeahead 的帮助下选择项目时不显示文本值

Question

我在 angularjs 项目中使用 typeahead。

我要将此值显示在具有 typeahead 属性的文本框中：

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

这里是带有 typeahead 属性的输入文本框：

<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.

这里是 planker.

我希望地址显示在文本框中，id 值保存在 selected variable.How 修复问题？

Answer 1

试试这个（运行代码片段）：

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>

在 typeahead 的帮助下选择项目时不显示文本值

Text value not displayed when item selected with help of typeahead

twitter-bootstrap

angularjs

angular-ui

angular-ui-bootstrap

angular-ui-typeahead