Question

我一直在尝试在我的有角项目中实现bootstrap Typeahead元素，但此处提供的示例非常复杂，我无法完全解析其中哪个属性控制如何在匹配条目上制表或单击列表中的列表下拉菜单会触发模型更新。在将this page上的预先输入示例适应我的模型之后，弹出窗口会正确显示，但是单击列表或在部分匹配项上进行制表键并不会像示例中那样填充我的输入元素。

这是我一直在使用的输入和列表的html元素。

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

需要修改其中的哪一部分，以便在列表中进行选择或在输入框中的部分匹配上按Tab即可填充输入框并更新模型属性“ myCell.entry”？

在custom-popup-wrapper ng-click属性ng-click="selectMatch($index)" implemented?中如何调用selectMatch函数，该示例随附的js文件没有实现代码的范围，并且除了代码之外，文档中没有任何内容关于它。

AngularJS typeahead指令-在选择时获取结果？

0 个答案: