Trying to get DropDown value
Question
I'm trying to get Dropdown select value for my On change Function but got undefined value.
what I did so far is that
<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>
and my Angular Code is
$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)}
so what I'm missing here.how can I get selected dropdown value so I can use it further
2 answers
solution1
2 2017-02-07 07:30:49
You have bound your select's value to the $scope.status , so you can get the dropdowns value with $scope.status .
$scope.getalert = function() {
alert($scope.status).
}
Example
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>
solution2
0 2017-02-07 08:58:27
The answer by Suren Srapyan has loophole that the first option in select box is displayed as undefined.
The below code is the solution for the same.
//--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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.