[英]Using ng-options with option select in AngularJS
I'm using AngularJS, and I want to use ng-options for a select tag to display options grouped by optgroups. 我正在使用AngularJS,并且我想对选择标记使用ng-options来显示按optgroups分组的选项。
this is the array I want to use in my select option: 这是我要在选择选项中使用的数组:
$scope.myList = [
{
"codeGroupCompetence": 1,
"titre": "TECH. DE PRODUCTION / EXPLOITATION",
"activated": true,
"competences": [
{
"codeCompetence": 7,
"titre": "Tech. exploitation",
"activated": true
},
{
"codeCompetence": 8,
"titre": "Tech. postes de travail",
"activated": true
},
{
"codeCompetence": 9,
"titre": "Tech. réseaux",
"activated": true
},
{
"codeCompetence": 10,
"titre": "Tech. Help Desk",
"activated": true
},
{
"codeCompetence": 11,
"titre": "Tech. Téléphonie",
"activated": true
},
{
"codeCompetence": 12,
"titre": "Tech. Autre",
"activated": true
}
]
},
{
"codeGroupCompetence": 2,
"titre": "ETUDES, CONCEPTION, MODELISATION",
"activated": true,
"competences": [
{
"codeCompetence": 5,
"titre": "Concepteur UML, Merise, ...",
"activated": true
},
{
"codeCompetence": 13,
"titre": "Admin Windows",
"activated": true
},
{
"codeCompetence": 14,
"titre": "Admin Unix",
"activated": true
},
{
"codeCompetence": 15,
"titre": "Admin Linux",
"activated": true
},
{
"codeCompetence": 16,
"titre": "Administrateur AS400",
"activated": true
},
{
"codeCompetence": 17,
"titre": "Administrateur Mainframe IBM",
"activated": true
},
{
"codeCompetence": 18,
"titre": "Administrateur Autres Systèmes",
"activated": true
}
]
},
{
"codeGroupCompetence": 3,
"titre": "ADMIN SYSTEMES",
"activated": true,
"competences": [
{
"codeCompetence": 6,
"titre": "Urbaniste SI",
"activated": true
}
]
}
];
In order to display this list using the group by
feature in ng-options
I created a new array as following : 为了使用
ng-options
的group by
功能显示此列表,我创建了一个新数组,如下所示:
$scope.competences = [];
myList.forEach(function(group){
group.competences.forEach(function(competence){
$scope.competences.push({
id : competence.codeCompetence,
titre : competence.titre,
group : group.titre
})
});
});
and this is how I display my select option : 这就是我显示选择选项的方式:
<select ng-model="tipost"
ng-options="competence.id as competence.titre group by competence.group for competence in competences track by competence.id">
</select>
Unfortunately this doesn't work for some reason, which I cant figure out what is it. 不幸的是,由于某些原因,这无法正常工作,我无法弄清楚这是什么。
So please, how can I solve this ? 所以,请问我该如何解决呢?
Another question : isn't there any other method to use only the first array with the group by
? 另一个问题:是否还有其他方法仅将第一个数组与
group by
?
Thanks in advance. 提前致谢。
This is a jsfiddle for my example : 这是我的示例的jsfiddle:
http://jsfiddle.net/rtCP3/615/ http://jsfiddle.net/rtCP3/615/
I've forked your fiddle here : 我在这里分叉了你的小提琴:
A couple of things that I noticed: I removed the track by clause in your repeat and added a scope vairable $scope.tipost to your controller. 我注意到了几件事:我在重复中删除了track by子句,并向您的控制器添加了范围可变的$ scope.tipost。
<select ng-model="tipost"
ng-options="competence.id as competence.titre group by competence.group for competence in competences">
</select>
Controller edits: You forgot the $scope on the myList variable, now you can use $scope.tipost to assign a preselected option and also retrieve the selected option as well. 控制器编辑:您忘记了myList变量上的$ scope,现在可以使用$ scope.tipost分配预选选项,并且还可以检索选择的选项。
$scope.tipost = 5;
$scope.myList.forEach(function(group){
group.competences.forEach(function(competence){
$scope.competences.push({
id : competence.codeCompetence,
titre : competence.titre,
group : group.titre
})
});
});
In this case the console was telling you what was wrong. 在这种情况下,控制台会告诉您出了什么问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.