AngularJSでオプション選択でng-optionsを使用

Question

私はAngularJSを使用しています。optタグでグループ化されたオプションを表示するには、selectタグにng-optionsを使用します。

これは私が私の選択オプションで使用したい配列です：

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

残念ながら、これは何らかの理由で動作しません。それは何であるか把握できません。

どうすればいいですか？

もう1つ質問：group byの最初の配列だけを使用する方法はありませんか？

ありがとうございます。

これは私の例のためにjsfiddleです：

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

Answer 1

私はあなたのフィドルhereフォークました：

私が気づい物事のカップル： 私はあなたに句でトラックを削除しますスコープを変更して、あなたのコントローラに$ scope.tipostを追加してください。

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

コントローラは、編集： あなたは今、あなたが事前に選択されたオプションを割り当てても同様に選択されたオプションを取得するために$ scope.tipostを使用することができ、はmyList変数に$スコープを忘れてしまいました。

この場合、コンソールは何が間違っているかを示していました。