Question

在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-model。在这种情况下，item.id绑定到vm.data.styleId。

然而除此之外，我还需要绑定＆＃39; item.name＆＃39;选定的选项。基本上，当选择一个选项时，我需要将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;
}

Answer 1

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

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

然后用

绑定到vm.data

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

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

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

2 个答案: