AngularJS ng-опции группируются по функциональности, есть любой способ отобразить имена групп и после нажатия на имя группы показать содержимое группы

Я работаю над группой 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>

Это работа и группировка в соответствии с классом. Я хочу, чтобы в меню отображался только класс, а при нажатии на имя класса отображался соответствующий ученик.

введите здесь описание изображения


angularjs angularjs-ng-options
person Dushyantha    schedule 19.04.2017    source источник
comment
То, что вы хотите сделать, уже предоставлено Select2. Ознакомьтесь с некоторыми примерами здесь.   -  person Hoa    schedule 19.04.2017
comment
Как я упоминал в одном из своих комментариев, то, что вы хотите сделать, создаст плохой пользовательский опыт. Создайте 10 классов, в каждом классе по 20 учеников, затем выберите ученика в конце списка, и вы понимаете, о чем я.   -  person Hoa    schedule 19.04.2017
comment
@Hora Я знаю, что слишком много кликов - это плохой UX, но пользователь просит об этом, поэтому я пытаюсь реализовать   -  person Dushyantha    schedule 19.04.2017
comment
Если да, то как разработчик программного обеспечения вы должны объяснить своему клиенту, почему такая реализация не годится. И это не просто требует больше кликов, у вас будет очень длинное окно выбора, когда количество классов и студентов будет расти. Пользователю придется прокрутить страницу вниз, чтобы выбрать студента.   -  person Hoa    schedule 19.04.2017

Ответы (1)


arrow_upward
1
arrow_downward

Это сложный случай, но я нашел решение:

Я предполагаю, что у вас может быть такая структура:

        [{
           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. Обработка события щелчка — на самом деле мы должны поместить его в прослушиватель 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 пример

person Leguest    schedule 19.04.2017
comment
Большое спасибо за быстрый ответ. - person Dushyantha; 19.04.2017
comment
@Lequest Кто бы дважды щелкнул поле выбора, чтобы выбрать одно значение? Кто бы знал, что при выборе значения в флажке будут отображаться дополнительные параметры, которые нельзя увидеть, не развернув поле выбора еще раз? Пользовательский опыт здесь довольно странный. - person Hoa; 19.04.2017
comment
@dushyantha Проверьте Select2 в моем комментарии к вашему вопросу. - person Hoa; 19.04.2017