javascript - Populate a Dropdown list by grouping using AngularJs

Question

I have a dropdown list which is used for holding Email Templates . Now , I have categorized this into two types of Templates . One is 'User Generated Templates' and other 'System Generated Templates' .

I have the functionality to keep adding the Templates and they get populates into the Dropdown .

The important part here is to "Group" the Templates as 'Email' and 'System'. I have a condition that, Whenever "USER TEMPLATES" are added , they should be placed above the "system templates"

I need to do populate a Dropdown list such that it gets grouped according to the "User" and "System" templates with AngularJS . How do i do this ?

Seeking Help !

Answer 1

Assuming the following structure for the templates :

$scope.templates = [{
    type: 'Email',
    name: 'Template u1'
}, {
    type: 'Email',
    name: 'Template u2'
}, {
    type: 'System',
    name: 'Template s1'
}, {
    type: 'Email',
    name: 'Template u3'
}, {
    type: 'System',
    name: 'Template s2'
}, {
    type: 'System',
    name: 'Template s3'
}];

If you want to group them by type in the dropdown you will declare your select element like that :

<select ng-model="template" ng-options="template.name group by template.type for template in templates">
    <option value=''>Select a template</option>
</select>

Refer to this fiddle