在AngularJS中將ng-options與選項select一起使用

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

我在這里分叉了你的小提琴：

我注意到了幾件事：我在重復中刪除了track by子句，並向您的控制器添加了范圍可變的$ scope.tipost。

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

控制器編輯：您忘記了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
            })
          });
        });

在這種情況下，控制台會告訴您出了什么問題。