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

为了使用group by中的ng-options功能显示此列表，我创建了一个新数组，如下所示：

  $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的第一个数组？

提前致谢。

这是我的例子：

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

Answer 1

我分道扬琴here：

我注意到的一些事情：我在你的重复中删除了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
            })
          });
        });

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

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

1 个答案: