I'm currently using ng-options to create a select tag that displays location options. The labels represent the location names, while the values indicate the corresponding location ID as stored in the database.
In addition to binding the value (location ID) to an ng-model attribute, I also wish to bind the label (location name) to a separate ng-model attribute. This separation is necessary since the id field will be sent via POST to a server that specifically expects this attribute. Can someone advise me on the optimal approach for accomplishing this task in Angular?
This section of my code illustrates the current implementation:
<div ng-app="app"><div ng-controller="edit">
<select ng-model="purchase.pickUpLocationId" ng-options="loc.id as loc.name for loc in purchase.availableLocations"></select>
<!-- At present, this model remains unbound: -->
<p>Your selected location is {{ purchase.pickUpLocationName }}</p>
</div></div>
var app = angular.module('app', []);
app.controller('edit', ['$scope', function($scope) {
$scope.purchase = {
pickUpLocationId: 30,
availableLocations: [
{id: 20, name: "Charleston, SC"},
{id: 30, name: "Atlanta, GA"},
{id: 40, name: "Richmond, VA"},
]
};
}]);