JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-controller="OptionsController">
<button value="add" ng-click="add()">
add
</button>
<div ng-repeat="val in v">
<select ng-model="val.myColor" ng-change="call(c.name)">
<option ng-repeat="c in colors" ng-disabled="c.shade=='dark'" value="{{c.name}}">
{{c.name}}
</option>
</select>
</div>
</div>
JavaScript
angular.module('myApp', [])
function OptionsController($scope, $timeout) {
$scope.v = [{myColor:0}];
$scope.colors = [
{name:'black', shade:''},
{name:'white', shade:''},
{name:'red', shade:''},
{name:'blue', shade:''},
{name:'yellow', shade:''}
];
$timeout(function() { $scope.myColor = 4;});
$scope.add = function() {
$scope.v.push({});
}
$scope.call = function() {
var k=0;
var n=0;
$scope.valV = [];
for(var i=0;i< $scope.v.length;i++) {
for(var j=0;j<$scope.colors.length;j++) {
if($scope.colors[j].name==$scope.v[i].myColor) {
$scope.colors[j].shade = 'dark';
$scope.valV[n] = $scope.colors[j];
n++;
}
}
}
$scope.val = [];
var m=0;
for(var k=0; k<$scope.colors.length;k++) {
if($scope.colors[k].shade=="dark") {
$scope.val[m] = $scope.colors[k];
m++;
}
}
$scope.newArray = [];
for (var g = 0; g < $scope.val.length; g++) {
var match = false;
for (var h = 0; h < $scope.valV.length; h++) {
if ($scope.val[g].name == $scope.valV[h].name) {
match = true;
break;
}
}
if (!match) {
$scope.newArray.push($scope.val[g]);
}
}
for (var a = 0; a < $scope.colors.length; a++) {
for (var b = 0; b < $scope.newArray.length; b++) {
if ($scope.colors[a].name == $scope.newArray[b].name) {
$scope.colors[a].shade = "";
}
}
}
}
}