使Angular（ng-options）中的多个选择框具有相同的值

我想要使用多个选择框，这些选择框将由用户根据请求通过单击按钮添加字段使用相同的值添加。只是为了简化问题，假设我们有两个选择框：使Angular（ng-options）中的多个选择框具有相同的值

<select name="user" id="user1" ng-model="Users" ng-options="user.fullname for User in Users"> 
    <option value="" selected="selected" disabled="disabled">Select User</option> 
</select> 

<select name="user" id="user2" ng-model="Users" ng-options="user.fullname for User in Users"> 
    <option value="" selected="selected" disabled="disabled">Select User</option> 
</select>

和我的数据集是这样的：

$scope.Users = [ 
    { username: joedoe, email: [email protected], id: 1}, 
    { username: jackblack, email: [email protected], id: 2}, 
    { username: mikedike, email: [email protected], id: 3} 
];

我需要在每个选择框中选定用户的所有数据。我知道如果有一个选择框，我可以得到对象'selectedItem'，所以我的问题是，我如何检索控制器中的每个选择框的用户对象？

来源

2015-12-30 Ahmet Cetin

尝试像这样

$scope.userList=[]; 

$scope.add=function(){ 
    $scope.userList.push({selected : '' }); 
}

HTML

<div ng-repeat="user in userList"> 
    <select name="user"ng-model="user.selected" ng-options="User.username for User in Users"> 
    <option value="" selected="selected" disabled="disabled">Select User</option> 
    </select> 
</div> 
<button ng-click="add()">Add</button>

JSFIDDLE

来源

2015-12-30 06:28:15

很酷！我只是在jsfiddle中做了一些更改：https：//jsfiddle.net/5s1bfjco/4/ 还有一件事：是否可以直接使用一组字段输入数据，而不是用按钮显示空白？ –

@AhmetCetin是的，这是可能的：https：//jsfiddle.net/aiubian/5s1bfjco/5/ –

非常感谢Anik！很大的帮助，感谢它！ –

ng-model将在选择框中保存所选项目的值。而ng-options将填充选项列表。

您需要在选择的元素中指定一个不同的ng-model。

例如对于user1和user2。

<select name="user" id="user1" ng-model="user1" ng-options="user.fullname for User in Users"> 
    <option value="" selected="selected" disabled="disabled">Select User</option> 
</select> 

<select name="user" id="user2" ng-model="user2" ng-options="user.fullname for User in Users"> 
    <option value="" selected="selected" disabled="disabled">Select User</option> 
</select> 

<button ng-click="displaySelected()">Display selected</button> 


$scope.user1 = null; 
$scope.user2 = null; 
$scope.Users = [ 
    { username: joedoe, email: [email protected], id: 1}, 
    { username: jackblack, email: [email protected], id: 2}, 
    { username: mikedike, email: [email protected], id: 3} 
]; 

$scope.displaySelected = function() { 
    console.log('items selected', $scope.user1, $scope.user2); 
}

来源

2015-12-30 06:27:00 Filype

只是另一种选择......这样你就可以拥有一切动感中设置LLY

在你的范围

$scope.selectedUserContainer = {};

在你的HTML定义选定的选项为对象的容器

<select name="user" id="user1" ng-model="selectedUserContainer['user1']" ng-options="user.fullname for User in Users"> 
    <option value="" selected="selected" disabled="disabled">Select User</option> 
</select>

您应该然后看到他们在该容器中。

{"user1": whatever selected, "user2": another one}

来源

2015-12-30 06:36:35 sdfacre

使Angular（ng-options）中的多个选择框具有相同的值

回答

相关问题