如何在 uib-typeahead 下拉列表中打断单词？

Question

我在 angularJs 应用程序中创建了 uib-typeahead 下拉菜单。我在 uib-typeahead 下拉列表中显示两个属性。 我根据名字调用 API，api 给出对象的响应。我在下拉列表中打印名字和姓氏。 名字和姓氏。但它显示在一行中。

<input class="form-control" type="text" ng-model="name" placeholder="Search name" 
        uib-typeahead="name as name.firstName + ' ' + name.lastName for a in searchByName($viewValue)" 
        typeahead-on-select='onSelectName($item)'>  

它在一行中显示 fname 和 lname。 但我想打破姓氏并在名字下方打印。 我怎样才能打破 uib-typeahead？

Answer 1

您可以传递一个 html 模板，而不是使用 uib-typeahead 在选择中显示属性名称，您可以使用它来定义任何您想要的地方。

<input type="text" ng-model="customPopupSelected" placeholder="Custom popup template" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-popup-template-url="customPopupTemplate.html" class="form-control">


<script type="text/ng-template" id="customTemplate.html">
  <a>
      <img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
      <span ng-bind-html="match.label | uibTypeaheadHighlight:query"></span>
  </a>
</script>

<script type="text/ng-template" id="customPopupTemplate.html">
  <div class="custom-popup-wrapper"
     ng-style="{top: position().top+'px', left: position().left+'px'}"
     style="display: block;"
     ng-show="isOpen() && !moveInProgress"
     aria-hidden="{{!isOpen()}}">
    <p class="message">select location from drop down.</p>

    <ul class="dropdown-menu" role="listbox">
      <li class="uib-typeahead-match" ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }"
        ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{::match.id}}">
        <div uib-typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
      </li>
    </ul>
  </div>
</script>

您可以在文档中查看更多信息：https://angular-ui.github.io/bootstrap/#!#typeahead