Using angular how to get the selected value in ng-change in the dropdown?
So I have some data coming in a comma separated string.
sizes: "Small,Medium,Large,X Large,XX Large"
I got a dropdown that displays a value based on the split of that string.
<select ng-options="choice as choice for (idx, choice) in val.sizes.split(',')"
ng-change="selected.product.set.size(choice);>
<option value="">Please select a size</option>
</select>
Usage ng-change
: how to pass a selected value choice
to a function?
source to share
You can use ng-model
and access it in your callback, ng-change
or you can just pass it.
<select ng-model="selectedSize" ng-options="choice as choice for (idx, choice) in val.sizes.split(',')"
ng-change="selected.product.set.size(selectedSize)">
<option value="">Please select a size</option>
</select>
angular.module('app', []).controller('ctrl', function($scope) {
$scope.sizes = "Small,Medium,Large,X Large,XX Large";
$scope.handleChange = function() {
console.log($scope.selectedSize)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<select ng-model="selectedSize" ng-options="choice as choice for (idx, choice) in sizes.split(',')" ng-change="handleChange()">
<option value="">Please select a size</option>
</select>
</div>
source to share
For me, using an ng model with a simple variable doesn't work! So $ scope.selectedSize will return undefined for me and $ scope.selectedSize = "what size ever" will not change the model selected from below.
Is it possible for this to work (variable byValue / byRef)?
Using ng.model = "whatever.selectedSize" and $ scope.whatever.selectedSize works in my case to get and set the drop / model value.
source to share
This will help.
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<div ng-controller="manageroles_controller" ng-app="app_manageroles">
<select title="Update Role Hierarchy" name="cmb_role_hierarchy" id="cmb_role_hierarchy" ng-model="cmb_role_hierarchy" ng-change="updateRoleHierarchy('cmb_role_hierarchy');">
<option ng-init="cmb_role_hierarchy=5" value="5">5</option>
</select>
</div>
var app_manageroles = angular.module('app_manageroles',[]);
app_manageroles.controller('manageroles_controller', function($scope,$http) {
$scope.updateRoleHierarchy = function(cntRoleHierarchy) {
alert(cntRoleHierarchy);
}
});
source to share