Question

要创建TypeAhead组件，我正在使用Angular2 ng2-auto-complete组件。我能够正确地获得功能。现在我想要它的风格。含义我想在箭头上添加动画，以便在显示下拉列表时，箭头反转。

我应该使用ng2-auto-complete组件中的list-formatter选项吗？如果是，我该如何使用它？我尝试使用css类，我使用动画，但它没有用。

此外，如果我只是添加图标，z-index不允许我将图标带到前面。意味着图标存在但隐藏在预先输入组件后面。

这是我的HTML代码

<input ng2-auto-complete id="inputEvent" class="form-control" [(ngModel)]="model" ngModel
     name="event" #event="ngModel" [source]="items" value-property-name=null display-property-name="name" (valueChanged)="onSelect($event)"/>
<span class="icon-arrow-down"></span>

Answer 1

在我发布的问题中，我试图在typeahead组件上添加一个外部图标，以模仿<button class="btn dropdown-button"></button>的外观。

所以我先使用<i></i>，然后为其添加了一个重叠类。

我的HTML是，

<i class="fa fa-lg icon-arrow overlay"></i>
<input ng2-auto-complete class="form-control" [(ngModel)]="model" ngModel
     name="typeahead" #typeahead="ngModel" [source]="values" value-property-name=null display-property-name="name" (valueChanged)="onSelect($event)"/>

CSS，

.overlay{
   position: absolute;
   top: 15px;
   left: 195px;
   width: 100%;
   height: 100%;
   z-index: 10;
   font-size:11px
}

Angular 2 ng2自动完成组件

1 个答案: