Having multiple selectbox in Angular (ng-options) with same values

Question

I want to use multiple select boxes, which will be added by the user on request by clicking a button add field, using the same values. Just to simplify the question, let's assume we have two select boxes:

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

and my dataset looks like this:

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

I need to get all data of the selected user in each select box. I know that i can get the object 'selectedItem' if there was one select box, so my question is, how can i retrieve back the user object for each select box separately in controller?

Answer 1

Try Like this

$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

Answer 2

the ng-model will hold the value of the selected item in the select box. While the ng-options will populate the list of options.

You need to specify a different ng-model in your select elements.

For example to user1 and 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: joedoe@company.com, id: 1},
    { username: jackblack, email: jackblack@company.com, id: 2},
    { username: mikedike, email: mikedike@company.com, id: 3}
];

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

Answer 3

Just another option... so you can have everything set dynamically

define a container for the selected options as an object in your scope

$scope.selectedUserContainer = {};

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

you should then see them in that container.

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