Как разбить слово в раскрывающемся списке uib-typeahead? - PullRequest
Новая
       58

Как разбить слово в раскрывающемся списке uib-typeahead?

1 голос
/ 28 мая 2020

Я создал раскрывающийся список uib-typeahead в моем приложении angularJs. Я отображаю два атрибута в раскрывающемся списке 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)'>

enter image description here

он показывает fname и lname в одной строке. но я хочу разбить фамилию и напечатать имя ниже. как мне взломать uib-typeahead?

1 Ответ

0 голосов
/ 28 мая 2020

Вместо использования uib-typeahead для отображения имени свойства в выделении вы можете передать шаблон html, с его помощью вы можете определить, где хотите. 

<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

...