Javascript 在AngularJS中使用带有选项选择的ng选项

我使用的是AngularJS，我想对select标记使用ng选项来显示按optgroups分组的选项

这是我要在选择选项中使用的数组：

$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
        }
      ]
    }
  ];

为了使用

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
            })
          });
        });

这就是我显示选择选项的方式：

<select ng-model="tipost" 
        ng-options="competence.id as competence.titre group by competence.group for competence in competences track by competence.id">
     </select>

不幸的是，由于某种原因，这不起作用，我不知道是什么原因

那么，我该如何解决这个问题呢

另一个问题：没有其他方法只使用第一个数组和

group by

提前谢谢

这是我的示例中的一个JSFIDLE：

我用叉子叉了你的小提琴：

我注意到了几件事： 我删除了repeat中的track by子句，并向控制器添加了scope vairable$scope.tipost

<select ng-model="tipost" 
        ng-options="competence.id as competence.titre group by competence.group for competence in competences">
     </select>

在这种情况下，控制台会告诉您出了什么问题

$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
            })
          });
        });