Question

我使用selected.js库来显示/呈现下拉列表。我有以下下拉列表html：

<select [(ngModel)]="myModel" data-placeholder="Some Dropdown Value" id="my-dropdown"
    class="chosen-select" (change)="onChange($event.target.value)">
<option value=""></option>
<optgroup label="Group 1">
    <option *ngFor="let entry1 of entries1" [ngValue]="entry1['id']"
            class="dropdown-item">
        {{entry1['name']}}
    </option>
</optgroup>
<optgroup label="Group 2">
    <option *ngFor="let entry2 of entries2" [ngValue]="entry2['id']"
            class="dropdown-item">
        {{entry2['name']}}
    </option>
</optgroup>

此选择完美有效，更改得到识别，myModel具有正确的值。

使用selected.js时，上面的select html会转移到：

<div class="chosen-container chosen-container-single chosen-container-active" title="" id="my_dropdown_chosen" style="width: 250px;">
<a class="chosen-single">
    <span>Some Dropdown value</span>
    <div><b></b></div>
</a>
<div class="chosen-drop">
    <div class="chosen-search">
        <input class="chosen-search-input" type="text" autocomplete="off">
    </div>
    <ul class="chosen-results">
        <li class="group-result">Group 1</li>
        <li class="active-result group-option dropdown-item" data-option-array-index="2" style="">
            Some Value 1
        </li>
        <li class="active-result group-option dropdown-item" data-option-array-index="3" style="">
            Some Value 2
        </li>
        <li class="active-result group-option dropdown-item" data-option-array-index="4" style="">
            Some Value 3
        </li>
        <li class="active-result group-option dropdown-item" data-option-array-index="5" style="">
            Some Value 4
        </li>
        <li class="active-result group-option dropdown-item" data-option-array-index="6" style="">
            Some Value 5
        </li>
    </ul>
</div>

下拉列表看起来相当不错，但是当然这些更改不再被识别，因为它是完全不同的html，它在应用程序的运行时间内呈现。你怎么能这样做？

是否有类似角度选择的库，但对于Angular 2而不是1？

Answer 1

你必须找到一个选择的图书馆＆＃34;对于角度2，你不能只实现js文件，因为你不会拥有角度分量的上下文。

也许它可以帮到你： Angular-chosen

Angular2中的Chosen.js无法识别更改

1 个答案: