将ng-options值和标签绑定到ng-model

Question

我正在使用ng-options生成一个选项为位置的选择标记.标签是位置名称,值是位置ID(在数据库中).

我已将值(位置ID)绑定到ng-model属性,但我还想将标签(位置名称)绑定到不同的ng-model属性.(我需要将id字段分开,因为这将被发布到需要此特定属性的服务器.)在Angular中执行此操作的最佳方法是什么？

我的代码:

<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>

  <!-- This is the 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"},
        ]
    };
}]);

Answer 1

您可以更改为以下内容并绑定到整个对象.id无论你想用它做什么,你仍然可以在以后访问

<select ng-model="selected" ng-options="loc as loc.name for loc in purchase.availableLocations"></select>

<p>You have selected {{ selected.name }}</p>
<p>You havd id too! {{ selected.id }}</p>

JSFiddle链接