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 !

I'm sorry, but I can't see any question here. Please edit your post and write down what seems to be the problem. — Eel Lee
– Eel Lee, Commented Mar 17, 2015 at 15:52
@EelLee : I wish to populate dropdown such tht it gets grouped according to the types — Ketz
– Ketz, Commented Mar 17, 2015 at 15:54

Michel · Accepted Answer · 2015-03-17 16:41:27Z

0

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

answered Mar 17, 2015 at 16:41

Michel

28.6k6 gold badges67 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ketz Over a year ago

thanks for the answer . .. Need one more help .. I am using <input file >for file uploading multiple files . I need to make client side validations for accepting only "txt/pdf/doc" files without using any plugin/library .

Collectives™ on Stack Overflow

Populate a Dropdown list by grouping using AngularJs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related