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 to share
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
0
source to share