Patrick Patrick - 1 year ago 60
AngularJS Question

getting the ng-object selected with ng-change

Given the following select element

<select ng-options="size.code as for size in sizes "

Is there a way to get MAGIC_THING to be equal to the currently selected size, so I have access to
in my controller?

size.code affects a lot of the other parts of the app (image urls, etc), but when the ng-model of
is updated,
needs to be updated as well for the user facing stuff. I assume that the correct way to do this is capturing the change event and setting the values inside of my controller, but I'm not sure what I can pass into update to get the proper values.

If this is completely the wrong way to go about it, I'd love to know the right way.

Answer Source

Instead of setting the ng-model to item.size.code, how about setting it to size:

<select ng-options="size as for size in sizes" 
   ng-model="item" ng-change="update()"></select>

Then in your update() method, $scope.item will be set to the currently selected item.

And whatever code needed item.size.code, can get that property via $scope.item.code.


Update based on more info in comments:

Use some other $scope property for your select ng-model then:

<select ng-options="size as for size in sizes" 
   ng-model="selectedItem" ng-change="update()"></select>


$scope.update = function() {
   $scope.item.size.code = $scope.selectedItem.code
   // use $scope.selectedItem.code and $ here
   // for other stuff ...