我正在按功能处理angularJS ng-options组。我想知道有任何方法只能显示组名,并且点击组名称会在选择下拉菜单中显示组内容。
$scope.testArry = [
{
"name":"john",
"class":"Grade1"
},{
"name":"Ann",
"class":"Grade1"
},{
"name":"jery",
"class":"Grade2"
},{
"name":"joy",
"class":"Grade2"
},{
"name":"Pere",
"class":"Grade1"
}];
<select class="form-control" name="operator" ng-model="student"
ng-options="student as student.name group by student.class for studentin testArray">
<option value="">Please Select</option>
</select>
这是根据班级的工作和小组。我想选择菜单只显示班级,点击班级名称时显示相关学生。
答案 0 :(得分:1)
这是一个复杂的案例,但我找到了解决方案:
我假设你可以有这样的结构:
[{
name: "Group 1",
options: [
{caption: "Option 1", value: "1"},
{caption: "Option 2", value: "2"}
]
}, {
name: "Group 2",
options: [
{caption: "Option 3", value: "3"},
{caption: "Option 4", value: "4"}
]
}
]
但它还没有为选择组件做好准备,因为我们无法绑定ng-click或标签,我们也需要正确的顺序。更新了选项数组:
[
{
"caption":"Group 1",
"type":"group",
"isActive":true,
"parentGroupSelected":false
},
{
"caption":"Option 1",
"value":"1",
"type":"option",
"parentGroupSelected":false,
"parentGroup":"Group 1"
},
{
"caption":"Option 2",
"value":"2",
"type":"option",
"parentGroupSelected":false,
"parentGroup":"Group 1"},
{
"caption":"Group 2",
"type":"group",
"isActive":true,
"parentGroupSelected":false
},
{
"caption":"Option 3",
"value":"3",
"type":"option",
"parentGroupSelected":true,
"parentGroup":"Group 2"
},
{
"caption":"Option 4",
"value":"4",
"type":"option",
"parentGroupSelected":true,
"parentGroup":"Group 2"
}]
模板(HMTL)
<div data-ng-controller="AppController as vm">
<select data-ng-model="vm.selectModel" data-ng-change="vm.handler(vm.selectModel)">
<option ng-value="item" data-ng-if="vm.checkVisibility(item)" data-ng-repeat="item in vm.optionsInline track by $index" >
<span>{{item.caption}}</span>
</option>
</select>
</div>
我们需要两个功能:
JS
可见性检查功能:
vm.checkVisibility = function(option) {
if(option.type == 'group') {
return true;
}
if(option.type == 'option') {
if(option.parentGroupSelected == true) {
return true;
}
}
return false;
}
Onclick(更改)处理程序:
vm.handler = function(option) {
if(option.type == 'group') {
option.isActive = !option.isActive;
vm.optionsInline.forEach(function(optionItem){
optionItem.parentGroupSelected = false; // accordion mode
if(optionItem.type == 'option') {
if(optionItem.parentGroup == option.caption) {
optionItem.parentGroupSelected = option.isActive;
}
}
})
}
}
如果您仍有疑问,请参阅下面的jsfiddle示例
JSFiddle example