ng-repeat Drop-down to restrict selecting same value multiple times

Question

I have a drop-down inside ng-repeat and a add button that can add new drop-down to the list as I've shown in the JSFiddle, and I want to restrict the second drop-down to select the first selected value in the second drop-down. So the value selected in the first drop-down should not allowed to select in the second or hide that value.

In my old question pankaj parkar given the answer,But I am unable to integrate that answer in my JSFiddle.

ng-repeat="post in posts | filter: { type: selectedValue }"

Please help me on this.

This is my old question

My JSFiddle.

var app = angular.module('angularjs-starter', []);

  app.controller('MainCtrl', function($scope) {
  
  $scope.names = ['Mobile','Office','Home'];

  $scope.choices = [{id: 'choice1'}];
  
  $scope.addNewChoice = function() {
    var newItemNo = $scope.choices.length+1;
    $scope.choices.push({'id':'choice'+newItemNo});
  };
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
   <fieldset ng-model='y' ng-repeat="choice in choices">
      <select>
         <option ng-model='x1' ng-repeat = "x in names">{{x}}</option>
      </select>
   </fieldset>
   <button class="addfields" ng-click="addNewChoice()">Add fields</button>
</div>

Answer 1

Put your options in scope items array. Get your output result from choices array.

var app = angular.module('angularjs-starter', []);

app.filter("itemFilter", function(){
  return function(items, choice){
    filtered_items=[];
    for(var i=0;i<items.length;i++){
      if(items[i].choiceID==null || items[i].TYPE_ID==choice.TYPE_ID)
        filtered_items.push(items[i]);
    }
    return filtered_items;
  }
});

app.controller('MainCtrl', function($scope) {
  
  $scope.items = [
     {"TYPE_ID":1,"TYPE_NAME":"Jpeg"},
     {"TYPE_ID":2,"TYPE_NAME":"Odt"},
     {"TYPE_ID":3,"TYPE_NAME":"docx"},
     {"TYPE_ID":4,"TYPE_NAME":"xls"}
  ];

  $scope.choices = [];
  
  $scope.addNewChoice = function() {
    var newChoiceID = 'choice'+$scope.choices.length+1;
    for(var i=0;i<$scope.items.length;i++){
    	if($scope.items[i].choiceID==null){
      	$scope.items[i].choiceID = newChoiceID;
	$scope.choices.push({'id':newChoiceID,TYPE_ID:$scope.items[i].TYPE_ID});
        break;
      }
    }
  };

  $scope.updateValue = function(choice) {
    for(var i=0;i<$scope.items.length;i++){
    	if($scope.items[i].choiceID==choice.id)
      	$scope.items[i].choiceID = null;
    	if($scope.items[i].TYPE_ID==choice.TYPE_ID)
      	$scope.items[i].choiceID = choice.id;
    }
  };
  
  $scope.addNewChoice();
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
   <fieldset ng-repeat="choice in choices">
      <select ng-model="choice.TYPE_ID" ng-change="updateValue(choice)">
         <option ng-repeat = "item in items | itemFilter:choice" value="{{item.TYPE_ID}}">{{item.TYPE_NAME}}</option>
      </select>
   </fieldset>
   <button class="addfields" ng-show="items.length>choices.length" ng-click="addNewChoice()">Add fields</button>
   <h4>Data for backend</h4>
   <ul>
     <li ng-repeat="choice in choices">TYPE_ID: {{choice.TYPE_ID}}</li>
   </ul>
</div>

Answer 2

You can try this solution, which works based on the first options selected value, based on the requirement you can change it.

var app = angular.module('angularjs-starter', []);

  app.controller('MainCtrl', function($scope) {
  
  $scope.names = ['Mobile','Office','Home'];
  $scope.selectedValue = [];
  $scope.choices = [{id: 'choice1', options: $scope.names}];
  
  $scope.addNewChoice = function() {
    var newItemNo = $scope.choices.length+1;

    // First Frame options list
    var ele = document.getElementById('myOptions');
	  var angularEle = angular.element( ele );
        
    var value = angularEle[0].value;
    $scope.selectedValue = $scope.names.filter(item => item !== value)
   
    $scope.choices.push({'id':'choice'+newItemNo, options: $scope.selectedValue});
  };
  
});

.addfields {
    -webkit-appearance: button;
    cursor: pointer;
	  color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<div id='mainC' ng-app="angularjs-starter" ng-controller="MainCtrl">
   <fieldset ng-model='y' ng-repeat="choise in choices">
	<p> <ul>Id, Options
		<li ng-repeat="(k,v) in choise">{{v}}</li>
	</ul></p>
    
	<select id='myOptions'>
      <option ng-model='x1' ng-repeat = "x in choise.options">{{x}}</option>
   </select>
   </fieldset>
   <button class="addfields" ng-click="addNewChoice()">Add fields</button>
</div>