How to break word in uib-typeahead dropdown?

Question

I created uib-typeahead dropdown in my angularJs app. i display two attribute in uib-typeahead dropdown. i call API based on first name and api give response with object. i print first name and last name in dropdown. First name and last name. but it is display in one line.

<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)'>  

it is shows fname and lname in one line. but i want to break last name and print below of first name. how can i break in uib-typeahead?

Answer 1

Instead of using the uib-typeahead to show the property name in the select, you can pass a html template, with it you can define wherever you want.

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

You can see more in the documentation: https://angular-ui.github.io/bootstrap/#!#typeahead