Create custom angular-bootstrap typeahead data

Question

I am having trouble with creating the list for bootstrap's ui-typeahead directive:

An $http-call returns the following json:

[{"title":"FOO", "equipment":[{"model":"Model 1"}, {"model":"Model 2"}], "combine":"true"}]

What I need to do is :

concatenate the title "FOO" to the input the user has already typed in the input field and
create a list of the equipments : "Model 1" and "Model 2" (the actual dropdown-data) as either 2 separate drop-down items OR concatenate "Model 1" and "Model 2" if "combine" is set to "true" which would yield only ONE drop-down item.

Upon clicking on one of the "equipment" entries in the drop-down I need to call a function which sets the chosen Model in a service object and then calls the $location's url function.

Is this possible?

Here's the template I am using via "typeahead-template-url":

<input typeahead="val for val in autoComplete($viewValue)"
  typeahead-template-url="searchAutocompleteTpl.html"  
  ng-model="query"/>

<script type="text/ng-template" id="searchAutocompleteTpl.html">
  <span>found in: </span>
  <div ng-repeat="eqp in match.model.equipment">
    <a href="" ng-click="showItem(eqp.model)">
      {{eqp.model}}
    </a>
  </div>
</script>

It is definitively possible and without a need for a custom template IMO. If you could put your code in a plunker I could fiddle with it. — pkozlowski.opensource
It's not exactly your question, but you can take a look here and probably find some inspiration to fiddle with your data: stackoverflow.com/questions/20220399/… — domokun

Zoltán Rajkai Zoltán Rajkai · Accepted Answer · 2016-02-10T16:14:23

You need to update your template:

<script type="text/ng-template" id="searchAutocompleteTpl.html">
  <span>found in: {{match.model.title}}{{query}}</span>
  <div ng-show="match.model.combine=='true'" ng-repeat="eqp in match.model.equipment">
    <a href="" ng-click="showItem(eqp.model)">
      {{eqp.model}}
    </a>
  </div>
  <div ng-show="match.model.combine=='false'">
    <a href="" ng-click="showItem(eqp.model)" ng-repeat="eqp in match.model.equipment">
      {{eqp.model}}
    </a>
  </div>
</script>

For your question 1 check <span>found in: {{match.model.title}}{{query}}</span>. With the model 'query' you can access the entered value and concatanate the title with it.

For question 2 I used to different divs and show only the appropriate one based on the combine value.

I also made a Fiddler, I hope it helps (it is not a beauty but works).

ZoliR

Create custom angular-bootstrap typeahead data

1 Answers