如何使用 Angular.JS 在下拉列表中绑定选项的值和文本答案

【问题标题】：How to bind both the option's value and text in a drop down list using Angular.JS如何使用 Angular.JS 在下拉列表中绑定选项的值和文本
【发布时间】：2016-01-27 13:14:46
【问题描述】：

在 Angular.JS 中，有没有办法在选择下拉选项时绑定两个不同的 ng-model？

角度代码：

<select ng-model="vm.data.styleId" ng-options="item.id as item.name for item in vm.getStylesData.styles">
    <option value="">Select a Style</option>
</select>

结果：

<option value="{{item.id}}">{{item.name}}</option>

With the Angular code I have so far, when an option is selected, it will save the option's value to the ng-model.在这种情况下，item.id 绑定到 vm.data.styleId。

但除此之外，我还需要绑定所选选项的“item.name”。 Basically, when an option is selected, I need to bind both the item.id to vm.data.styleId, and the item.name to vm.data.name.

有没有使用 Angular.JS 的简单方法？

解决方案（使用 lisa p. 的答案）：

在视图中：

<select ng-model="vm.styleItem" ng-change="vm.getDetails()" ng-options="item as item.name for item in vm.getStylesData.styles">
    <option value="">Select a Style</option>
</select>

控制器内部：

vm.getDetails = function () {
    // set the values of the select drop down
    vm.data.styleId = vm.styleItem.id; 
    vm.data.style = vm.styleItem.name;
}

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

您可以绑定到包含两个值的对象，例如

item = { styleId: 23, name: "the name" }
vm.data = {{ styleId: ..., name: ... }}

然后你绑定到 vm.data

<option value="{{item}}">{{item.name}}</option>

【讨论】：

谢谢。这非常适合我需要的东西。干杯！
很高兴为您提供帮助。编码愉快！

【解决方案2】：

控制器

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

    $scope.vm.data.styleId = "";

    $scope.item = {id : '1', name : 'name'};    

});

html

<div ng-controller="myCtrl">
 <select ng-model="vm.data.styleId" ng-options="item.id as item.name for item in vm.getStylesData.styles">
    <option value="{{item}}">{{item.name}}</option>
</select>

</div>

创建一个同时包含 id 和 name 的对象并将该对象作为值传递给选项

【讨论】：