機能別AngularJS ng-optionsグループ名を表示する方法はありますが、グループ名をクリックするとグループ名を表示します

Question

私はangularJS ng-optionsグループを機能別に取り組んでいます。グループ名を表示し、グループ名をクリックすると、選択したドロップダウンメニューにグループの内容が表示されます。

$scope.testArry = [ 
    { 
     "name":"john", 
     "class":"Grade1" 
    },{ 
     "name":"Ann", 
     "class":"Grade1" 
    },{ 
     "name":"jery", 
     "class":"Grade2" 
    },{ 
     "name":"joy", 
     "class":"Grade2" 
    },{ 
     "name":"Pere", 
     "class":"Grade1" 
    }]; 

<select class="form-control" name="operator" ng-model="student" 
    ng-options="student as student.name group by student.class for studentin testArray"> 
    <option value="">Please Select</option> 
</select> 

これはclass.Iに係る作業やグループは、メニュー表示のみクラスとするとき、クラス名のクリックで、関連する学生を表示を選択したいです。

Answer 1

それは複雑なケースですが、私は解決策が見つかりました：

私はあなたがこのような構造を持つことができると仮定します。

 [{ 
      name: "Group 1", 
      options: [ 
      {caption: "Option 1", value: "1"}, 
      {caption: "Option 2", value: "2"} 
      ] 
     }, { 
      name: "Group 2", 
      options: [ 
      {caption: "Option 3", value: "3"}, 
      {caption: "Option 4", value: "4"} 
      ] 
     } 
     ] 

をしかし、それはので、選択したコンポーネントの準備ができていないのです我々はタグまたはタグをバインドすることはできませんし、適切な順序が必要です。更新オプションの配列：

[ 
    { 
     "caption":"Group 1", 
     "type":"group", 
     "isActive":true, 
     "parentGroupSelected":false 
    }, 
    { 
     "caption":"Option 1", 
     "value":"1", 
     "type":"option", 
     "parentGroupSelected":false, 
     "parentGroup":"Group 1" 
    }, 
    { 
     "caption":"Option 2", 
     "value":"2", 
     "type":"option", 
     "parentGroupSelected":false, 
     "parentGroup":"Group 1"}, 
    { 
     "caption":"Group 2", 
     "type":"group", 
     "isActive":true, 
     "parentGroupSelected":false 
    }, 
    { 
     "caption":"Option 3", 
     "value":"3", 
     "type":"option", 
     "parentGroupSelected":true, 
     "parentGroup":"Group 2" 
    }, 
    { 
     "caption":"Option 4", 
     "value":"4", 
     "type":"option", 
     "parentGroupSelected":true, 
     "parentGroup":"Group 2" 
    }] 

テンプレート（HMTL）

<div data-ng-controller="AppController as vm"> 

    <select data-ng-model="vm.selectModel" data-ng-change="vm.handler(vm.selectModel)"> 

     <option ng-value="item" data-ng-if="vm.checkVisibility(item)" data-ng-repeat="item in vm.optionsInline track by $index" > 
      <span>{{item.caption}}</span> 
     </option> 

    </select> 
    </div> 

は、我々は2つの機能が必要です

1. ハンドルをクリックしてイベントを - 実際に私たちはのonchangeリスナー
2. チェックでそれを配置する必要があります実際のオプションの可視性

JS

可視性チェック機能：

vm.checkVisibility = function(option) { 

      if(option.type == 'group') { 
       return true; 
      } 

      if(option.type == 'option') { 
       if(option.parentGroupSelected == true) { 
        return true; 
       } 
      } 

      return false; 

     } 

にOnclick（変更）ハンドラ：

vm.handler = function(option) { 

      if(option.type == 'group') { 

        option.isActive = !option.isActive; 

        vm.optionsInline.forEach(function(optionItem){ 

        optionItem.parentGroupSelected = false; // accordion mode 

         if(optionItem.type == 'option') { 

          if(optionItem.parentGroup == option.caption) { 
           optionItem.parentGroupSelected = option.isActive; 
          } 

         } 

        }) 

      } 
     } 

あなたはまだあなたが

JSFiddle以下の私のjsfiddleの例を参照することができます質問がある場合example