Question

我正在尝试为我的On change Function获取Dropdown选择值，但是得到了未定义的值。

到目前为止我做的是

  <div class="list">
  <div class="item item-input item-select">
    <div class="input-label">
      Status
    </div>
    <select id="ddlstatus"  ng-model="status" ng-change="getalert()" >


      <option  ng-repeat=" status in Status" value="{{status.StatusCodeId}}">{{status.StatusCode}}</option>

    </select>
  </div>
 </div>

我的角色代码是

   $scope.StatusD =function(){

  $scope.Status=[ ];
   $http({
        crossDomain: true,
        type: 'GET',
        dataType: 'jsonp',
        url: Baseurl+'/api/Status'
        }).then(function(resp){
        $scope.Status = resp.data;
        console.log($scope.Status);
          });
      };
   $scope.getalert=function()alert(document.getElementById("ddlstatus").value)}

所以我在这里缺少。我可以获得选定的下拉值，以便我可以进一步使用

Answer 1

您已将选择的值绑定到$scope.status，因此您可以使用$scope.status获取下拉值。

$scope.getalert = function() {
   alert($scope.status).
}

示例

angular.module('app', []).controller('MyCtrl', ['$scope', function($scope){ $scope.status = 'value1'; $scope.getalert = function(){ alert($scope.status); }; }])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="app" ng-controller="MyCtrl"> <select id="ddlstatus" ng-model="status" ng-change="getalert()" > <option value="value1">Value 1</option> <option value="value2">Value 2</option> <option value="value3">Value 3</option> <option value="value4">Value 4</option> </select> </body>

Answer 2

Suren Srapyan的回答有一个漏洞，即选择框中的第一个选项显示为未定义。

以下代码是相同的解决方案。

//--app.module.js--// 
angular.module('app', []);
//--app.controller.js--//
angular.module('app')
  .controller('StatusController', StatusController);

StatusController.$inject = ['$log'];

function StatusController($log) {
  var vm = this;
  vm.status = 'value1';
  vm.showStatusConsole = showStatusConsole;

  function showStatusConsole() {
    $log.log('Current Status Is:- ' + vm.status);
  }
}

<html ng-app="app">

<body ng-controller="StatusController as statusObj">
  <select id="ddlstatus" ng-model="statusObj.status" ng-change="statusObj.showStatusConsole()">
    <option value="value1">Value 1</option>
    <option value="value2">Value 2</option>
    <option value="value3">Value 3</option>
    <option value="value4">Value 4</option>
  </select>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <script src="app.module.js"></script>
  <script src="app.controller.js"></script>
</body>

</html>

试图获得DropDown值

2 个答案: