如何使用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>

我的目标是禁用或隐藏在其他选项上选择的选项，如果我从first select box 中选择选项India，那么我从dont need to select Option India 中选择Option India。

注意：我正在使用 ng-repeat 加载选项

我尝试了ng-disabled="secondCountry" 属性，但这会禁用整个选择框。

如何管理这个？？？

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>