CODEWITHSUNDEEP
htmlangularjs
JIJOMON K.A
JIJOMON K.A

Reputation: 1280

How to disable an Option in a select box using angularjs

I have two select boxes like below

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

My Goal is to disable or hide the option is selected on other that is , If i select the option India from first select box then I dont need to select the Option India from the second select box.

NOTE : Iam loading the options by using ng-repeat

I tried the ng-disabled="secondCountry" Property but this disables the entire select box.

How to manage this ???

Upvotes: 1

Views: 663

Answers (1)

Mayank Vadiya
Mayank Vadiya

Reputation: 1451

You can manage this scenario with two way. You have to bind your second dropdown with ngChange event like Below:

First

<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';
  }
};

Second

you have disable those option which is selected on first dropdown with 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>

Upvotes: 4

Related Questions