角度为2的简单下拉组件

时间:2016-12-12 13:14:47

标签: angular

如何为简单的html下拉列表创建一个打字稿组件?

    <div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

如何实施?

1 个答案:

答案 0 :(得分:1)

<select [(ngModel)]="whereWeStoreTheValue">
  <ng-container *ngFor="let option of options">
    <option *ngIf="!option.isDivider" [ngValue]="option">{{option.name}}</option>
    <option *ngIf="option.isDivider" disabled>{{option.name}}</option>

  </ng-container>
</select>
class MyComponent {
  options = [
   {name: 'Action'}, 
   {name: 'Another action'},
   {name: 'Something else here'},
   {isDivider: true},
   {name: 'Separated link}
  ];
}