在预先输入的帮助下选择项目时不显示文本值答案

【问题标题】：Text value not displayed when item selected with help of typeahead在预先输入的帮助下选择项目时不显示文本值
【发布时间】：2016-05-10 07:40:49
【问题描述】：

我在我的 angularjs 项目中使用 typeahead。

我有这个值要显示在带有 typeahead 属性的文本框中：

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

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

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

但是当item被选中时显示的值的id而不是地址的问题。

这里是planker。

我希望地址显示在文本框中，id值保存在selected变量中。如何解决问题？

【问题讨论】：

看到这个答案stackoverflow.com/questions/15930339/…

标签： angularjs twitter-bootstrap angular-ui-bootstrap angular-ui angular-ui-typeahead

【解决方案1】：

试试这个（运行代码 sn-p）：

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>

【讨论】：

这不是您正在寻找的解决方案？！
好的。非常感谢！
请投票只是为了删除收到的答案 -1 票！谢谢
Bettimms，对不起，我错误地投票为 -1 我尝试投票但我收到了锁定的消息。请您对问题进行一些小的更新，以便我可以投票？
已移除 _selected ，因此我进行了更改。谢谢！