Question

我有两个选择使用相同的列表。当我从选择A中选择选项“ Foo”时，必须在选择B上隐藏相同的选项“ Foo”。任何想法如何使用AngularJS做到这一点？我正在尝试这样的事情

<div class="col-md-6">
    <label>
        Testemunha 1 :
    </label>
    <select select-normal data-placeholder="..." ng-model="notificacaoOrientativa.testemunha1"
            ng-options="obj as obj.pessoa.nome for obj in lstTestemunha">
        <option></option>
    </select>
</div>

<div class="col-md-6">
    <label>
        Testemunha 2 :
    </label>
    <select select-normal data-placeholder="..." ng-model="notificacaoOrientativa.testemunha2" 
            ng-options="obj as obj.pessoa.nome for obj in lstTestemunha ">
        <option></option>
    </select>
</div>

  $scope.esconderTestemunhaSelecionada = function(obj){
    if($scope.lstTestemunha.includes(obj)){
      $scope.lstTestemunha.style.display = "none";
      return $scope.lstTestemunha;
    }
  }

Answer 1

您可以在第二选择项上使用过滤器。这将过滤第二个选择中的项目，以使第一个选择中的项目不会出现。如果您需要使其更为复杂（例如，这将导致第二个选择项没有任何选项，直到在第一个选择项中选择了某些内容，这可能是不希望的副作用），您可以随时编写自己的自定义过滤器。

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.selectItems = [];
    $scope.selectedItemA = {};
    $scope.selectedItemB = {};
    for (let i = 1; i <= 10; i++) {
      $scope.selectItems.push({
        id: i,
        name: 'Item #' + i
      });
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div>
    Select Item A:
    <select ng-model="selectedItemA" ng-options="item as item.name for item in selectItems"></select>
  </div>
  <div>
    Select Item B:
    <select ng-model="selectedItemB" ng-options="item as item.name for item in selectItems | filter: { id: '!' + selectedItemA.id }"></select>
  </div>
</div>

Answer 2

我不是按照我希望的方式解决了这个问题，但是效果很好。

<div class="col-md-6">
    <label>
        Testemunha 1 :
    </label>
    <select select-normal data-placeholder="..." ng-model="notificacaoOrientativa.testemunha1"
          ng-options="obj as obj.pessoa.nome for obj in lstTestemunha">
          <option></option>
    </select>
</div>

<div class="col-md-6">
    <label>
        Testemunha 2 :
    </label>
    <select select-normal data-placeholder="..." ng-model="notificacaoOrientativa.testemunha2" ng-disabled="!notificacaoOrientativa.testemunha1"
                        ng-options="obj as obj.pessoa.nome for obj in lstTestemunha | filter: {pessoa:{ id: '!' + notificacaoOrientativa.testemunha1.pessoa.id }}">
        <option></option>
    </select>
</div>

我正在强迫用户设置第一个选择，并根据第一个选择过滤第二个。

顺便说一句我可怜的英语。

当另一个选择选中时隐藏选项

2 个答案: