AngularJS Example:
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js"></script>
Here are the steps (IE11): <br /><br />
<ol>
<li>Select Bender </li>
<li>Click the duplicate link </li>
<li>Select Fry </li>
<li>Notice that the one that is selected is Leela but the model still has fry (id:2) as the one selected</li>
</ol>
<br /><br />
<div ng-app="myapp">
<div ng-controller="Ctrl">
<div ng-repeat="aSelection in selectedIds ">
<select ng-model="aSelection.id" ng-options="a.value as a.name for a in allIds | ddlFilter:aSelection:selectedIds">
<option value="">--Select--</option>
</select>
<a href="#" ng-click="dupDropDown(aSelection)">Duplicate</a>
</div>
<br/>{{ selectedIds }}</div>
</div>
JavaScript
var myapp = angular.module('myapp', ['appFilters']);
myapp.controller('Ctrl', function ($scope) {
$scope.selectedIds = [{}];
$scope.allIds = [{ name: 'Bender', value: 1},
{name: 'Fry', value: 2},
{name: 'Leela', value: 3 }];
$scope.dupDropDown = function(currentDD) {
var newDD = angular.copy(currentDD);
$scope.selectedIds.push(newDD);
}
});
angular.module('appFilters',[]).filter('ddlFilter', function () {
return function (allIds, currentItem, selectedIds) {
//console.log(currentItem);
var listToReturn = allIds.filter(function (anIdFromMasterList) {
if (currentItem.id == anIdFromMasterList.value)
return true;
var areThereAny = selectedIds.some(function (aSelectedId) {
return aSelectedId.id == anIdFromMasterList.value;
});
return !areThereAny;
});
return listToReturn;
}
});