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>

这是根据班级的工作和小组。我想选择菜单只显示班级，点击班级名称时显示相关学生。

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>

我们需要两个功能：

处理点击事件 - 实际上我们必须将它放在onchange listener
检查实际选项的可见性

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

AngularJS ng-options按功能分组，有任何方式显示组名，点击组名后显示组内容

1 个答案: