Geek Answers Handbook

Angular combobox with ui-select

I am looking for a way to create combobox (entering text and a dropdown in one). The text field should be attached to the model value, as if it were regular text input, but at the same time it should be possible to select a value from the drop-down list that will be set as text.

I tried angular -ui-select ( https://github.com/angular-ui/ui-select ) but could not get the required functionality. This is either a text box, or only allows you to select from the drop-down list. My user should be able to enter custom text or select from a drop-down list.

I tried with the code below, which, of course, does not work, since my element.customType model is installed only after the value is selected from the drop-down list. Does anyone know how this can be achieved using ui-select or perhaps another directive?

<ui-select ng-model="element.customType" theme="bootstrap" ng-disabled="disabled" style="min-width: 300px;">
  <ui-select-match placeholder="Enter customType...">{{$select.selected}}</ui-select-match>
  <ui-select-choices repeat="type in CUSTOM_TYPES">
     <div ng-bind-html="trustAsHtml(type)"></div>
  </ui-select-choices>
</ui-select>

Any help is appreciated.

+4
source share
1 answer

I also had a very similar problem until several months with this.

Jimmy, please see the following docs http://ivaynberg.imtqy.com/select2/ and https://github.com/angular-ui/ui-select2

Why don't you use a proven tag select?

select2 Angular js css js, https://github.com/angular-ui/ui-select2#usage

, 2 SELECT2: PLAIN select2 select2 ANGULAR -UI-SELECT2

, , HTML , :

<select ui-select2 ng-model="selectedSingle" data-placeholder="-- Select One --">
    <option></option>
    <option ng-repeat="item in items" value="{{item.id}}">{{item.name}}</option>
 </select>

https://github.com/angular-ui/ui-select2#working-with-dynamic-options

, , :)

+3

More articles:


All Articles