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

Question

我正在使用ng-options生成一个选择标记，其选项为位置。标签是位置名称，值是位置ID（在数据库中）。

我将值（位置ID）绑定到ng-model属性上，但我还想将标签（位置名称）绑定到不同的ng-model属性上。（我需要分离id字段，因为这将被POST到期望特定属性的服务器。）在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"},
        ]
    };
}]);

- eirikir

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 Link

- scniro

---

即使我设置了 $scope.purchase.selected = {id: 30, name: "Atlanta, GA" };，它似乎并没有使用控制器中设置的默认位置。应该如何处理？ - eirikir

@eirikir 你可以添加类似 $scope.selected = $scope.purchase.availableLocations[1]; 的内容。 - scniro

几乎可以，但实际上我需要使用 pickUpLocationId 字段将 purchase 对象 GET 和 POST 到后端服务器。我需要循环遍历 availableLocations 来查找匹配的对象吗？还是我可以将 pickUpLocationId 绑定到 selected.id 上？或者 Angular 约定规定将此问题抽象为单独的模块，例如数据序列化模块？ - eirikir

@eirikir 这可能是http转换的一个好选择。如果需要更改对象属性名称，请向下滚动到每个请求的转换部分。 - scniro

Answer 2

我的建议是先将其建模为哈希表

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

- Nikhil Baliga

---

购买.pickUpLocationId - jcubic

你是说我应该将availableLocations存储为哈希表吗？那么在这种情况下，ng-options如何工作？ - eirikir

我已经更新了。感谢@jcubic指出的错别字，已经修复了。 - Nikhil Baliga

Answer 3

更新的 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 -绑定ng选项值和标签

- Surya R Praveen