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

How to bind both the option's value and text in a drop down list using Angular.JS

本文关键字：选项 文本 绑定 Angular 何使用 JS 下拉列表      更新时间：2023-09-26

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

角度代码：

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

使用到目前为止的 Angular 代码，当选择一个选项时，它会将该选项的值保存到 ng 模型中。在这种情况下，item.id必然vm.data.styleId。

但是除此之外，我还需要绑定所选选项的"item.name"。基本上，当选择一个选项时，我需要将item.id绑定到vm.data.styleId，并将item.name绑定到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;
}

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

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

然后使用

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

控制器 

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 和名称的对象，并将该对象作为值传递给选项

相关文章：