代码之家 › 专栏 › 技术社区 › abhishek kumar

使用嵌套ng选项时,如何从下拉列表中将选定的值放入范围?

angularjs-ng-options angularjs-scope angularjs javascript

abhishek kumar · 技术社区 · 10 年前

下面是我用来填充多重选择下拉列表的视图代码

<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>

我使用的控制器是

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

现在,我想用绑定所选字段(即所选位置、设备、阶段控制器) $scope 在控制器端和我正在使用的模型中,会给出所选下拉键的值。

3 回复 | 直到 10 年前

miquelarranz 10 年前

您可以在控制器中检索选定的值,因为您正在选择中使用ng model=“FIELD”。

因此,如果要获取控制器中的值,可以使用:

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

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

rahulbhondave 10 年前

您可以添加ng更改事件以获取所选位置,

<select id="location" ng-change="getSelectedLocation()" ng-model="location" ng-options="city for (city, facilities) in sourceSelection " style="width: 100px"><option value=''>Select</option></select>

在控制器中,

app.controller('sourceController', function($scope, $http, $rootScope) {

     $scope.getSelectedLocation = function() {

        console.log($scope.location);
     }
});

abhishek kumar 10 年前

下面两行是我从同事那里得到的答案

$scope.getSelectedLocation= function(){
        var temp = document.getElementById("location");
        var location = temp.options[temp.selectedIndex].value;
      console.log(location);
} ;

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

4 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

4 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

4 年前

jieunbi · 按日期排序数组(最新优先)

4 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

4 年前

Stradosphere · 如何防止ng bind html添加结束标记?

8 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

8 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

8 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

8 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

8 年前