подробности о выражении ng-options

0

У меня есть код ниже, который используется для развертки древовидной структуры от модели до представления в раскрывающемся списке. Я не могу понять следующее выражение:

ng-options="classification for (classification, configs) in filterData"

Пара сомнений здесь.

  1. Почему раскрывающийся список классификации указывает на configs для ng-модели.
  2. Как я могу получить выбранную классификацию (system_config или network_config) в моем элементе управления?
  3. При выборе классификации из раскрывающегося списка конфигурации автоматически фильтруются. Как получить выбранную конфигурацию в моем контроллере.

Ссылка Plnkr - Plnkr

Код для представления выглядит следующим образом:

<div class="m-b">
  <div class="form-group s-b" style="width: 150px;">
    <span>classification</span>
    <select class="form-control" id="classification" ng-model="configs" ng-options="classification for (classification, configs) in filterData" ng-change="handleClassification(criteria)" style="max-width:100%">    </select>
  </div>
  <div class="form-group s-b" style="width: 150px;">
    <span>Config</span>
    <select id="config" ng-options="config for (config, attributes) in configs" class="form-control" ng-model="attributes" style="max-width:100%" ></select>
  </div>
  <div class="form-group s-b" style="width: 150px;">
    <span>Attribute</span>
    <select id="attribute" class="form-control" ng-options="attribute for attribute in attributes"  ng-model="attribute" style="max-width:100%;" ng-change="handleAttrChange(attribute)"></select>
  </div>
</div>  

Модель выглядит следующим образом:

{
  "system_config": {
  "damask": [
    "umask"
  ],
  "fsuration": [
    "AUTOFSCK_DEF_CHECK"
    ],
    "hible": [
      "HIEFORMAT"
    ],
    "linux_status": [
    "SeLinuxStatus"
    ],
    "kl_version": [
      "KeelVersion"
    ],
    "ssh_parameters": [
      "Port",
      "Protocol"
    ],
    "network_parameter": [
      "kernel.shmmax",
      "kernel.sysrq"
    ],
      "snmp_community": [
      "rocommunity",
      "trapmmunity"
    ],
    "password_expiration_parameters": [
      "PASS_MAX_DAYS",
      "PASS_WARN_AGE"
    ]
  },
  "network_config": {
    "interface_configuration": [
      "ONBOOT"
    ],
    "networking_configuration": [
      "NETWORKING",
      "NETWORKING_IPV6",
      "NOZEROCONF"
    ],
    "interface_speed": [
      "InterfaceSpeed"
    ]
  }
}

Внутри моего контроллера на кнопке отправки нажмите:

$scope.searchParams = function(){
   console.log($scope.configs);
 }

Пожалуйста, дайте мне знать, так как я впервые использую ng-options и запутался.

Теги:
angularjs-scope
angularjs-ng-options

1 ответ

0

В вашем контроллере значение выбора будет сохранено в вашей переменной ng-model. Вы используете это, чтобы отфильтровать список и установить значения для следующего раскрывающегося списка, тем самым не сохраняя выбранную опцию.

"классификация для (классификация, конфиги) в filterData" означает, что вы создаете параметры для вашего выбора из объекта filterData. Часть (классификация, конфиги) - это (ключ, значение) ваших объектов. Это означает, что вы являетесь параметрами, являющимися ключами объекта filterData, и результатами, которые вы будете хранить в конфигурациях (которые также являются вашей ng-моделью) значением ключей объекта. Вы можете найти дополнительную информацию об этом здесь

Чтобы получить доступ к значениям выбора, вы можете использовать HTML

 $("#classification")[0].options[$("#classification")[0].selectedIndex].innerText;

или вы можете использовать директиву ng-change для вызова функции, которая устанавливает выбранное значение. Измените ng-change на ng-change = "handleClassification (configs)" вместо "критерии", а затем добавьте в свой скрипт

$scope.handleClassification = function(cfg){
    $scope.myConfig = cfg;
}
  • 0
    Я напечатал $ scope.configs в контроллере после отправки кнопки отправки. Когда я печатаю значения $ scope.configs, я получаю список пар ключ-значение, но не выбранную классификацию, выбранную конфигурацию, выбранный атрибут. Пожалуйста, дайте мне знать, как получить выбранные значения из выпадающего списка. Обновлен вопрос и plunker для более подробной информации.
  • 0
    Вы правы! Только что отредактировал мой ответ. Надеюсь, это поможет.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню