在AngularJS中使用ng选项和选项select

Using ng-options with option select in AngularJS

本文关键字：选项 select ng AngularJS      更新时间：2023-09-26

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

这是我想在我的选择选项中使用的阵列：

$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/

我把你的小提琴叉在这里了：

我注意到了几件事：我删除了您重复中的track-by子句，并向您的控制器添加了一个作用域vaible$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
            })
          });
        });

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

相关文章：