Как отключить опцию в поле выбора с помощью angularjs

Question

У меня есть два поля выбора, как показано ниже

<select ng-model="secondCountry" id="secondCountry"  required class="form-control" >
         <option ng-value="0">Select 2nd Country</option>
	 <option >india</option>
         <option >usa</option>
         <option >Japan</option>
 </select>
              

<select ng-model="thridCountry" id="thridCountry"   required class="form-control" >
	<option ng-value="0">Select 3rd Country</option>
	<option >india</option>
        <option >usa</option>
      <option >Japan</option>
</select>

Моя цель состоит в том, чтобы отключить или скрыть выбранный параметр на другом, то есть, если я выберу параметр India из first select box, тогда я dont need to select the Option India из second select box.

ПРИМЕЧАНИЕ. Iam загружает параметры, используя ng-repeat

Я пробовал свойство ng-disabled="secondCountry", но это отключает весь выборbox.

Как с этим справиться ???

Answer 1

Вы можете управлять этим сценарием двумя способами.Вы должны связать свое второе dropdown с событием ngChange, как показано ниже:

Первый

<select ng-model="secondCountry" id="secondCountry"  required class="form-control" >
  <option ng-value="0">Select 2nd Country</option>
  <option>india</option>
  <option>usa</option>
  <option>Japan</option>
 </select>


<select ng-model="thridCountry" id="thridCountry" ng-change="change()"  required class="form-control" >
 <option ng-value="0">Select 3rd Country</option>
 <option>india</option>
 <option>usa</option>
 <option>Japan</option>
</select>

$scope.change = function() {
  if($scope.secondCountry == $scope.thridCountry){
     $scope.thridCountry = '0';
  }
};

Второй

Вы отключили те опции, которые выбираются в первую очередь dropdown с помощью ngDisabled.

<select ng-model="thridCountry" id="thridCountry" ng-change="change()"  required class="form-control" >
    <option ng-value="0">Select 3rd Country</option>
    <option ng-disabled="secondCountry=='india'">india</option>
        <option ng-disabled="secondCountry=='usa'">usa</option>
      <option ng-disabled="secondCountry=='Japan'">Japan</option>
</select>