使用AngularJs通过分组填充下拉列表 [英] Populate a Dropdown list by grouping using AngularJs

问题描述

我有一个用于保存电子邮件模板的下拉列表。现在，我已将其分为两种类型的模板。一个是用户生成模板和其他系统生成模板。

我有继续添加模板的功能，它们会填充到Dropdown中。

这里的重要部分是将模板分组为电子邮件和系统。我有条件，每当添加用户模板时，它们应该放在系统模板上面

我需要填充一个下拉列表，这样它就可以了使用AngularJS根据用户和系统模板进行分组。我该怎么做呢 ？

寻求帮助！

解决方案

假设模板具有以下结构：

  $ scope.templates = [{
 type：'Email'，
 name：'Template u1'
}，{
类型：'电子邮件'，
名称：'模板u2'
}，{
类型：'系统'，
 name：'Template s1'
}，{
 type：'Email'，
 name：'Template u3'
}，{
 type：'System'， 
 name：'Template s2'
}，{
 type：'System'，
 name：'Template s3'
}]; 
  

如果您想在下拉列表中按类型对它们进行分组，您将声明选择这样的元素：

 < select ng-model =templateng-options = template.name group by template.type for template in templates> 
< option value ='>选择模板< / option> 
< / select> 
  

请参阅此小提琴

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 !

解决方案

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

这篇关于使用AngularJs通过分组填充下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！