代码之家 › 专栏 › 技术社区 › core114

具有下拉菜单的Bootsrap按钮,转换为具有下拉菜单的ng bootstrap按钮,

angular5 ng-bootstrap angular

0

core114 · 技术社区 · 8 年前

我是Angular的初学者,我想知道如何为 ng bootsrap ,我可以用bootstrap-4,但我不知道角度, Im关注此 Ng-bootstrap drop down ,但不起作用请帮帮我, 谢谢

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Currency
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">USD</a>
          <a class="dropdown-item" href="#">AUS</a>
       
        </div>
      </div>
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
    </div>
  </div>
 
</div>

2 回复 | 直到 8 年前

1

0

Quan VO 8 年前

如果将ng bootstrap与Angular 5一起使用,则应通过npm安装bootstrap,如 here . 这是一个 example 关于下拉菜单。我正在使用 @ng-bootstrap/ng-bootstrap@1.0.0-beta.5 我修改了你的代码,效果很好:

<div ngbDropdown>
    <button type="button" class="btn btn-secondary" ngbDropdownToggle>
      Currency
    </button>
    <div ngbDropdownMenu>
      <a class="dropdown-item" href="#">USD</a>
      <a class="dropdown-item" href="#">AUS</a>
    </div>
</div>

在中定义名为items的变量。ts文件: items = ['A','B','C'] ,然后将下拉列表替换为:

<a class="dropdown-item" href="#" *ngFor="let item of items">{{item}}</a>

2

0

core114 8 年前

我找到了解决方案,现在它对我有效,建议 ng-bootstrap 团队

GitHub

Live sample

<div class="input-group">
  <div class="input-group-btn">
    <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
      <button class="btn btn-secondary" ngbDropdownToggle>Action</button>
      <div class="dropdown-menu" ngbDropdownMenu>
        <button class="dropdown-item">One</button>
        <button class="dropdown-item">Two</button>
        <button class="dropdown-item">Four!</button>
      </div>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>