Question

我有以下代码，用于将树结构从模型向下钻取到下拉列表中的视图。我无法理解以下表达式：

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

怀疑在这里。

为什么ng-model的分类下拉列表指向configs。
如何在我的控件中获取所选的分类（system_config或network_config）？
从下拉列表中选择分类时，配置会自动进行过滤。如何在我的控制器中获取所选配置。

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并感到困惑。

Answer 1

在控制器中，选择值将存储在ng-model变量中。您正在使用它来过滤列表并设置下一个下拉列表的值，从而不保存所选选项。

＆＃34; filterData＆＃34;中的（分类，配置）分类意味着您要从对象filterData中为您的选择创建选项。（分类，配置）部分是对象的（键，值）。这意味着您的选项将成为filterData对象的键，并且您将在配置（也是您的ng-model）中存储对象键值的结果。您可以找到有关它的更多信息here

要访问选择值，您可以使用HTML

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

或者您可以使用ng-change指令调用设置所选值的函数。将ng-change更改为ng-change =＆＃34; handleClassification（configs）＆＃34;而不是＆＃34;标准＆＃34;然后添加到您的脚本

$scope.handleClassification = function(cfg){
    $scope.myConfig = cfg;
}

有关ng-options表达式的详细信息

1 个答案: