Using angular, How do I get selected value on ng-change on a dropdown?

Question

So I have some data coming in a string seperated by commas.

sizes: "Small,Medium,Large,X Large,XX Large"

I got a drop down that displays value based on splitting 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>

Using ng-change: How do I pass the selected value choiceto a function?

score 9 · Accepted Answer · answered Jan 09 '15 at 01:33

You could use an ng-model and access it in your ng-change callback, or just pass it through.

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

score 0 · Answer 2 · answered Nov 05 '15 at 09:29

For me using ng-model with just a simple variable does not work! So $scope.selectedSize would return undefined for me and $scope.selectedSize = "what size ever" wouldn't change the select drop down's model.

Is this even possible to work this way (byValue / byRef variable)?

Using ng.model="whatever.selectedSize" and $scope.whatever.selectedSize works in my case for getting and setting the drop down's / the model's value.

score -1 · Answer 3 · edited Sep 03 '16 at 11:21

This will surely 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);
    }
});

Using angular, How do I get selected value on ng-change on a dropdown?

3 Answers3