如何動態加載模型 angularjs 選擇組合框

Question

目前我有一個組合框。 在我的應用服務中，我查詢我的數據庫並獲取前十名。

<select id="StationSelectionCombobox"
        name="Country"
        ng-options="s.amenityUID as s.amenityName for s in  vm.nearbyStations"
        ng-model="vm.stations[$index].amenityUID"
        ng-change="vm.updateStation($index)"
        class="form-control bs-select drop-down"
        ui-jq="selectpicker">
    <option value="">@L("NotSelected")</option>
</select>

我希望在輸入字符時動態更新模型。 請問我應該怎么做，或者是否可以使用這種控件。

Answer 1

組合框不是 HTML4 或 AngularJS 原生的。 它們需要第三方庫或自定義指令。

考慮使用這些庫：

• ui-select2指令與 ngModelController、 ng-model和驗證指令（如ng-required配合得很好。
• ui-select Select2和Selectize 的AngularJS 原生版本。

---

使用<datalist>元素作為組合框

HTML5 具有可以充當組合框的<datalist>元素：

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice"
       name="ice-cream-choice" ng-model="flavorChoice" />    
<datalist id="ice-cream-flavors">              
    <option ng-repeat="choice in choicesArr | filter : flavorChoice | limitTo : 5"
            ng-value="choice">
    </option>
</datalist>

有關更多信息，請參閱

• MDN HTML 參考 - <datalist>元素