javascript - 在 AngularJS 中使用带有选项选择的 ng-options

Question

我正在使用 AngularJS，我想使用 ng-options 作为选择标签来显示按 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 一起使用？

提前致谢。

这是我的示例的 jsfiddle :

http://jsfiddle.net/rtCP3/615/

Answer 1

我 fork 了你的 fiddle here :

我注意到的几件事: 我在您的重复中删除了 track by 子句，并向您的 Controller 添加了一个范围可变的 $scope.tipost。

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

Controller 编辑: 您忘记了 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
            })
          });
        });

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