javascript - Bind ng-options value and label to ng-model -
i'm using ng-options
generate select tag options locations. labels location names, , values location id (in database).
i've bound value (location id) ng-model
attribute, i'd bind label (location name) different ng-model
attribute. (i need separate id
field since posted server expects particular attribute.) what's best way in angular?
my code:
<div ng-app="app"><div ng-controller="edit"> <select ng-model="purchase.pickuplocationid" ng-options="loc.id loc.name loc in purchase.availablelocations"></select> <!-- model not yet bound: --> <p>you have selected {{ 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"}, ] }; }]);
you can change following , bind entire object. you'll still have access id
later on whatever wish it
<select ng-model="selected" ng-options="loc loc.name loc in purchase.availablelocations"></select>
<p>you have selected {{ selected.name }}</p> <p>you havd id too! {{ selected.id }}</p>
Comments
Post a Comment