Angular ng-options mapping "select" portion to different model properties

Question

I'm trying to use ng-options to select a Role.

I have Role objects that look like this:

{
    Id: 'someRoleId',
    Name: 'someRoleName
}

and then a list of select options that come from the server like this:

{ 
    Value: 'someRoleId'
    Text: 'someRoleName',
}

Currently I have this select field bound to the Role property of party on the controller.

<select ng-model="party.Role" ng-options="o as o.Text for o in options.RoleOptions track by o.Value" />

It correctly translates the options, but the selected value (o) doesn't have matching properties, so the binding doesn't work. Is there any way to map the Value to Id, and Text to Name using ng-options?

Thanks!

Answer 1

Try this..

Markup:

<select ng-model="role" ng-options="o as o.Text for o in options.RoleOptions track by o.Value" ng-model-options="{getterSetter:true}"/>

Controller:

var _role;

$scope.role = function (val) {
   if (angular.isDefined(val)) { //setter
      _role = {
           'Id': val.Value,
           'Name': val.Text
       }
   } else {
      //getter
      return {
         'Value': _role.Id,
         'Text': _role.Name
      };
   }
}