javascript - 使用嵌套 ng-option 时如何从下拉列表中将选定的值纳入范围？

Question

以下是我用来填充多个选择下拉列表的 View 代码

<div ng-controller="sourceController">
  <form novalidate ng-submit="submit()">
    <div class="row">
      <div class="addNewButton">
        <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">Add New Data Source</button>
        <div ng-include="'pages/modal.html'"></div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-3">
        Location:
        <select id="location" ng-model="location" ng-options="city for (city, facilities) in sourceSelection " style="width: 100px">
          <option value=''>Select</option>
        </select>

      </div>

      <div class="col-sm-3">
        Facility:
        <select id="facility" ng-disabled="!location" ng-model="facility" ng-options="facility for (facility, phases) in location">
          <option value=''>Select</option>
        </select>

      </div>

      <div class="col-sm-3">
        Phase :
        <select id="phase" ng-disabled="!facility" ng-model="phase" ng-options="phase for phase in facility">
          <option value=''>Select</option>
        </select>

      </div>

      <div class="col-sm-3">
        Device Type
        <select id="deviceType" ng-disabled="!phase" ng-model="deviceType">
          <option value=''>Select</option>
          <option ng-repeat="deviceType in deviceTypes" value="{{deviceType}}">{{deviceType}}</option>
        </select>
      </div>
    </div>

    <input type="submit" id="submit" value="Submit" />

  </form>
  <button onclick="myFunction()">click here</button>
  selected choices : {{location}} , {{facility}},

</div>

我使用的 Controller 是

app.controller('sourceController', function($scope, $http, $rootScope) {
  $scope.sourceSelection = {
    "Chennai": {
      "siruseri": ["phase1", "phase2"],
      "chennai one": ["phase1"]
    },
    "kochi": {
      "Kochi_technopark": ["phase1"]
    }
  };
});

现在我想将选定的字段(即选定的位置、设施、 Controller 中的阶段)与 Controller 端的 $scope 绑定(bind)，并且我正在使用的模型为我提供了选定的值下拉键。

Answer 1

您可以在 Controller 中检索所选值，因为您在选择中使用了 ng-model="FIELD"。

因此，如果您想获取 Controller 中的值，可以使用:

$scope.FIELD // FIELD can be location, phase, facility, etc

该变量将存储每个选择的选定选项的值。