在angular.js的选择下拉列表中绑定值和文本答案

【问题标题】：Binding both value and text in select dropdown in angular.js在angular.js的选择下拉列表中绑定值和文本
【发布时间】：2014-10-03 21:14:34
【问题描述】：

我的页面中有这个下拉菜单

<select 
    ng-options="col.col_id as col.col_name for col in meta_data.x_cols"
    ng-model="obj.x">
</select>

由于模型设置为obj.x，我可以在任何$scope 函数中使用$scope.obj.x 访问它。

自然地，它给出了所选选项的value。有什么方法可以让我获得选定的文本吗？例如将obj.x 和obj.x_text 绑定到所选选项的文本。

【问题讨论】：

只需删除“as”ng-options="col.col_name for col in meta_data.x_cols"。那么你的模型将是整个对象。这是一个例子 - jsfiddle.net/devitate/LKeQz
谢谢@Dylan。它有效

标签： javascript angularjs ng-options angular-ngmodel

【解决方案1】：

如果你绑定 col 而不是 col.col_id：

<select 
    ng-options="col as col.col_name for col in meta_data.x_cols track by col.col_id"
    ng-model="obj.x">
</select>

您将能够从 $scope.obj.x 访问 col_id 和 col_name：

$scope.obj.x.col_id
$scope.obj.x.col_name

【讨论】：

嘿，它解决了这个问题，但产生了新问题。当我更改模型时，它不会更新视图。我认为因为现在它是一个对象，所以平等会失败，因为 ({} != {})。
你能分享一个说明这种行为的 plunkr 吗？
这是一个小提琴jsfiddle.net/x8rq2pda/3。看看第二个选择是如何没有被赋值的。
使用angular 1.2及以上，可以使用track by，见jsfiddle.net/qomn86k3
谢谢你，你真棒。我希望我能重新接受答案。 :)

【解决方案2】：

为什么不在选项标签上使用 ng-repeat..

例如

<select 
    ng-options="col.col_id as col.col_name for col in meta_data.x_cols"
    ng-model="obj.x">

    <option
      ng-repeat="col in meta_data.x_cols"
      value="{{col.id}}"
    >{{col.name}}</option>

</select>

【讨论】：

我不喜欢这种用于大型列表的方法，因为 IE 11/Edge 的渲染速度要慢得多（我相信其他早期版本的 IE 也是）