CODEWITHSUNDEEP
angularjscomboboxangular-ui-selectangularjs-select2angularjs-select
Phoenix
Phoenix

Reputation: 467

How to load model on the fly angularjs Select combo box

At the moment I have a combo box. In my appservice, I query my database and grab top ten. 

<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>

I am looking to update the model on the fly as characters are entered. May I ask how abouts should I do that, or if this is even capable with this control.

Upvotes: 0

Views: 273

Answers (1)

georgeawg
georgeawg

Reputation: 48968

Combo boxes are not native to HTML4 or AngularJS. They require a third-party library or a custom directive.

Consider using these libraries:

  • ui-select2 directive which plays nicely with the ngModelController, ng-model, and validation directives such as ng-required.
  • ui-select AngularJS-native version of Select2 and Selectize.

Using <datalist> element as a combo box

HTML5 has the <datalist> element which can act as a combobox:

<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>

For more information, see

Upvotes: 0

Related Questions