Does angular ui select (bootstrap version) optgroup support?

Does anyone know if Angular-UI-Select Bootstrap version is supported ? optgroup

Can't seem to find any documentation for this at https://github.com/angular-ui/ui-select ?

Here's an example:

plnkr.co/edit/QCwSM75ilH2Vh6D9aMA4?p=preview

      

How to add optgroup

?

In this example, let's say a group of people by country.

+3


source to share


2 answers


You can use the group-by attribute .

See "Demo Multiselect" (last example "Array of objects (with groupBy)") at https://github.com/angular-ui/ui-select



This is a multi-selector demo, but group-by works for a single selection too.

+3


source


This is a group - with a string

app.js:

$scope.countries = [
                {
                    "code": "AD",
                    "name": "Andorra",
                    "continent": "Europe"
                },
                {
                    "code": "AE",
                    "name": "United Arab Emirates",
                    "continent": "Asia"
                },
                {
                    "code": "AF",
                    "name": "Afghanistan",
                    "continent": "Asia"
                }
            ];

      

HTML:



<div>
    <label>COUNTRY</label><br>
    <ui-select ng-model="user.country" style="min-width: 300px;">
        <ui-select-match placeholder="Select Country">
            <span ng-bind="$select.selected.name"></span>
        </ui-select-match>
        <ui-select-choices repeat="country in countries | filter: {name: $select.search}" group-by="'continent'">
        <span ng-bind="country.name"></span>
        </ui-select-choices>
    </ui-select>
</div>

      

Generated JSON of all countries with their continent using

http://peric.github.io/GetCountries/

0


source







All Articles