Patrick Patrick - 5 months ago 22
AngularJS Question

getting the ng-object selected with ng-change

Given the following select element

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


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

size.code affects a lot of the other parts of the app (image urls, etc), but when the ng-model of
item.size.code
is updated,
item.size.name
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

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

<select ng-options="size as size.name 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.

Fiddle.

Update based on more info in comments:

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

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

Controller:

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