Question

我希望能够在选择后显示整个列表。我想这样做的方法是将选择放在占位符中并清除输入的模型。

在typeahead-on-select事件中，我保存所选的值，并将模型设置为“”。我预计下拉列表就像输入是空的一样，但它没有。

<input type="text" ng-model="myModel" data-min-length="0"
  typeahead="item for item in items | filter:$viewValue"
  placeholder="{{currentModel}}" 
  ng-blur="validateSelection()" 
  typeahead-on-select="onSelect($item, $model, $label)">

当我清除输入的模型时，typeahead不会检测模型中的更改。如果我然后键入1个字符并将其删除，我会得到整个列表。

Angular v1.2.9

Angular Bootstrap v0.10.0

任何帮助都会受到赞赏，即使采用不同的方法也是如此。

修改如何在select之后阻止下拉关闭或使typeahead检测到模型中的更改？

Answer 1

我做了类似的事情。我在typeahead的右侧添加了一个按钮，因此它看起来像一个下拉菜单，然后单击按钮会显示typeahead选项。你可以做相当于我用来实现它的按钮点击。您必须根据需要修改以下代码。这来自我制定的指令

       var which = 'idOfTypehead'; // This is actually a variable, I just set it here
                                   // it is the id="XXX" from my typeahead
       $("#"+which).focus();
       var e = jQuery.Event('keydown', {which: 40 });
            $timeout(function() {
                $("#"+which).trigger(e);
            },0);
        } ;

Answer 2

我可以解决这个问题，只需添加一个ng-click功能即可停止传播到模态内容。这样ng-click =“dropdownMenuClick（$ event）”。

<header class="top-header clearfix" data-ng-controller="headerController">

    <!--modal search panel-->
    <li class="dropdown top-bar-item search-panel" ng-show="searchCallback">
        <a href="javascript:;" class="dropdown-toggle" toggle="dropdown">
            <i class="glyphicon glyphicon-search"></i>
            <span>Search modal panel</span>
        </a>
        <div class="dropdown-menu with-arrow panel panel-dark" style="width: 330px;">
            <div class="panel-heading">
                <i class="glyphicon glyphicon-search"></i> <span>{{currentSearchTitle}}</span>
            </div>
            <div ng-click="dropdownMenuClick($event)">
                <div class="panel-body">

                    <div class="row">

                        <input type="text"
                               placeholder="Type your word"
                               ng-model="result"
                               typeahead="item as item.Name for item in buildings($viewValue)"
                               typeahead-on-select='onSelect($item, $model, $label)'
                               class="form-control">

                    </div>

                </div>
            </div>
            <div class="panel-footer text-right">
                <a href="javascript:;" class="" toggle="dropdown" ng-click="searchCallback(seachFilter)">
                    <i class="glyphicon glyphicon-search"></i>
                    <span>Search</span>
                </a>
            </div>
        </div>
    </li>
    <!--modal search panel-->

</header>

在控制器中：

(function () {
    'use strict';
    angular.module('app')

    .controller('headerController', [
      '$scope', '$http', '$routeParams', 'logger', '$modal', 'appConfig',
      function ($scope, $http, $routeParams, logger, $modal, appConfig) {

          $scope.dropdownMenuClick = function ($event) {
              $event.preventDefault()
          };

      }
    ]);

}).call(this);

Angular UI Typeahead - 防止选择下拉关闭

2 个答案: