AngularJS ng-options按功能分組，有任何方法可以顯示組名，並且在點擊組名後顯示組內容

Question

我正在使用angularJS ng-options組功能。我想知道有什麼辦法只顯示組名稱和apter點擊組名顯示在選擇下拉菜單中的組內容。

$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"} 
      ] 
     } 
     ] 

但它並不準備選擇組件，因爲我們無法綁定ng-click或標籤，也需要正確的順序。更新選項數組：

[ 
    { 
     "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> 

我們需要兩個功能：

1. 手柄click事件 - 事實上，我們必須把它放在平變化監聽
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問題