Question

我有一个 Angular 项目，该项目使用来自 bootsnipp （ Bootstrap片段）的下拉列表。我遇到的问题是下拉列表无法使用搜索栏。

// HTML

<div class="input-group">
  <div class="input-group-btn search-panel">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      <span id="search_concept">Search In</span> <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#"><i class="fa fa-th" aria-hidden="true"></i> All Category</a></li>
      <li><a href="#"><i class="fa fa-laptop" aria-hidden="true"></i> IT Solutions</a></li>
      <li><a href="#"><i class="fa fa-paint-brush" aria-hidden="true"></i> Design and Multimedia</a></li>
      <li><a href="#"><i class="fa fa-globe" aria-hidden="true"></i> Social Media and Marketing</a></li>
    </ul>
  </div>
  <input type="hidden" name="search_param" value="all" id="search_param">         
  <input type="text" class="form-control" name="x" placeholder="Enter search keyword here">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
  </span>
</div>

// JS

ngAfterViewInit(){
  $('.search-panel .dropdown-menu').find('a').click(function(e) {
    e.preventDefault();
    var param = $(this).attr("href").replace("#","");
    var concept = $(this).text();
    $('.search-panel span#search_concept').text(concept);
    $('.input-group #search_param').val(param);
  });
}

Answer 1

请尽量避免使用Angular中的jQuery。 Angular正在进行这些任务。首先，您需要了解dropstrap在引导程序中的工作原理。当您单击下拉按钮或链接时，只需在下拉列表中添加一个类来显示菜单，类名称为“show”。现在你知道它是如何工作的。现在是时候实施了。按照以下步骤完成您的任务。

在组件中声明一个toggleFlag命名变量。

public toggleFlag = false;
现在在下拉菜单按钮上创建一个点击事件。这将调用组件中的方法。

搜索
现在在组件中创建show方法。这个方法将chnage toggleFlag变量。

public showDropdown（）{ this.toggleFlag =！this.toggleFlag; }
现在是时候在模板中使用toggleFlag varibale了。

ul class =“dropdown-menu”role =“menu”[ngClass] =“{'show'：toggleFlag}”

希望它会有所帮助

Answer 2

您可以尝试使用此ngx-bootstrap。

https://valor-software.com/ngx-bootstrap/#/dropdowns

Bootstrap下拉列表在Angular中不起作用

2 个答案: