Question

如何让Angular Typeahead建议的第一个元素出现在输入框中，而不是仅仅在下拉列表中？我搜索过，但似乎无法找到如何访问下拉列表中显示的元素。我们的想法是，无论用户何时开始输入，该建议都会以背景文字形式出现，您可以在typeahead.js example

中看到

<input type="text" ng-model="selected" typeahead-min-length="0" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control"> <!--Here i want the first suggestion -->

Plunker：http://plnkr.co/edit/nQYm83onnkUHa5tUFCk6?p=preview

即使是简单的{{matches [0]}}也不会给出元素。

Answer 1

如果我理解正确，你想在占位符中显示states数组的第一个值，如果是，那么试试这个：<input type="text" placeholder ="{{states[0]}}" ng-model="selected" typeahead-min-length="0" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">

Answer 2

我想你想要这样的东西：

<html ng-app="plunker">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
  <script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
  <script src="example.js"></script>
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>

<body>

  <alert type="'info'">Typeahead from <a href="http://angular-ui.github.com/bootstrap/">http://angular-ui.github.com/bootstrap/</a>"</alert>
  <div class='container-fluid' ng-controller="TypeaheadCtrl">
    <pre>Mod: {{result}}</pre>
    <pre>Res: {{citiesList.list[0]}}</pre>
    <input type="text" ng-model="result"
        typeahead="suggestion for suggestion in (citiesList.list= cities($viewValue)) | filter: { name: $viewValue }"
        typeahead-editable="false"
        typeahead-min-length="3"
        typeahead-wait-ms="500"
        typeahead-append-to-body="true"
        typeahead-on-select='citiesList.list[0] = $item'
        >
  </div>
</body>

</html>

Plunker

有人可以改进这种变体吗？

Angular Typeahead指令 - 访问匹配元素

2 个答案: