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

【问题标题】：Bind ng-options value and label to ng-model将 ng-options 值和标签绑定到 ng-model
【发布时间】：2015-06-30 11:28:42
【问题描述】：

我正在使用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"},
        ]
    };
}]);

【问题讨论】：

标签： javascript html angularjs angular-ngmodel ng-options

【解决方案1】：

更新了 scniro 答案

<div ng-app="app">
<div ng-controller="ctrl">
     <select ng-model="selected" ng-options="opt as opt.language for opt in tableResult.locales"></select>        
     <p>You have selected {{ selected.language }}</p>
     <p>You havd id too! {{ selected.localeId }}</p>
     <p>
     </p>
     <input type="text" value="{{selected.localeId}} : {{selected.language}}" style="width:50%;"/>

</div>

JSFIDDLE -Bind ng options value and label

【讨论】：

【解决方案2】：

您可以更改为以下内容并绑定到整个对象。稍后您仍然可以访问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 Link

【讨论】：

这似乎没有使用控制器中设置的默认位置，即使我设置了$scope.purchase.selected = {id: 30, name: "Atlanta, GA" };。这应该怎么做？
@eirikir 你可以添加类似$scope.selected = $scope.purchase.availableLocations[1];
几乎，但我实际上需要 GET 并将 purchase 对象发布到带有 pickUpLocationId 字段的后端服务器。在 GETing purchase 之后，我是否需要遍历 availableLocations 才能找到匹配的对象？或者我可以以某种方式将pickUpLocationId 绑定到selected.id？还是 Angular 约定将这个问题抽象到一个单独的模块中，例如用于数据序列化？
@eirikir 这可能是http transformations 的理想人选。如果您需要更改对象属性名称，则向下滚动到每个请求转换

【解决方案3】：

我的建议是先建模为哈希

{
   "20": "Charleston, SC",
   "30": "Atlanta, GA"
}

然后使用{{availableLocations[purchase.pickUpLocationId]}}

并将 ng-options 设为

<select ng-model="purchase.pickUpLocationId" ng-options="id as label for (id, label) in purchase.availableLocations"></select>

【讨论】：

应该是purchase.pickUpLocationId
你是说我应该将availableLocations 存储为哈希吗？ ng-options 在这种情况下如何工作？
我已经更新了。感谢@jcubic 指出错字，已修复。