AngularJS typeahead directive - get result on select?

473 Views Asked by At

I have been trying to implement a bootstrap Typeahead element in my angular project but the examples provided here are pretty complicated and I can't quite parse which of these attributes controls how the tabbing on a matched entry or clicking on the list in the dropdown triggers the model update. After adapting the typeahead example on this page to my model, the popup appears correctly, but clicking on the list or tabbing on a partial match does not populate my input element as it does in the example.

Here are the html elements for the input and the list I have been using.

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

<div class='container-fluid typeahead-demo' ng-controller="TypeaheadCtrl">

<p>{{items.length}}</p>
    <h4>Custom popup templates for typeahead's dropdown</h4>
    <pre>Model: {{myCell.value + "/" + myCell.entry + ' selected: ' }}{{selected}}</pre>
    <input type="text" ng-model="myCell.entry" ng-keypress="checkEntry($event, myCell.entry)" placeholder="Custom popup template" 
    uib-typeahead="name   as item.name for item in items | filter:{name:$viewValue}" typeahead-popup-template-url="customPopupTemplate.html" typeahead-min-length="0" class="form-control">
    <label id="value">{{myCell.value}}</label>
  </div>

Which part of this need to be modified so that selecting on the list or pressing tab on a partial match in the input box populates the input box and updates the model attribute 'myCell.entry'?

Also how is the selectMatch function called in the custom-popup-wrapper ng-click attribute ng-click="selectMatch($index)" implemented? The js file provided with the sample has no implementation code the scope, and there's nothing in the documentation other than the code about it.

0

There are 0 best solutions below