AngularJS禁用先前选择的下拉选项答案

【问题标题】：AngularJS disable dropdown option which previously selectedAngularJS禁用先前选择的下拉选项
【发布时间】：2023-04-09 21:56:01
【问题描述】：

var demoApp = angular.module('myApp', []);
demoApp.controller('QaController', function($scope, $http) {
    $scope.loopData = [{}, {}];

    $scope.questions = {
        model: null,
        availableOptions: [
            {id: '1', name: 'What is your childhood name?'},
            {id: '2', name: "What is your first school?"},
            {id: '3', name: "What is your first job place?"},
            {id: '4', name: "What is your pet name?"}
        ]
    };

    $scope.submit = function() {
        $scope.result = $scope.loopData;
    };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<body ng-app="myApp">
        <div class="wrapper wrapper-content middlealigen col-sm-12" ng-controller="QaController">
            <form ng-submit="submit();">
                <div ng-repeat="x in loopData">
                    <h5>Q. {{$index + 1}}</h5>
                    <select class="form-control" name="question-drop" id="question_dropdown" ng-model="x.question" ng-options="option.id as option.name for option in questions.availableOptions">
                        <option value="">Select Question</option>
                    </select>
                    <input type="text" placeholder="Enter Answer" name="answer" class="form-control" ng-model="x.answer" />
                    <div class="m-b"></div>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>

            <div ng-if="result">
                <pre>{{result | json}}</pre>
            </div>

        </div>
    </body>

你能检查我的代码sn-p吗？这是两个下拉列表。如果我从Q. 1 下拉列表中选择What is your childhood name?，则应在Q. 2 下拉列表中禁用此选项。我该怎么做？

【问题讨论】：

Related.
@Chinmay235 您使用的是哪个版本的 Angular？
@GangadharJannu 我正在使用 AngularJS v1.5.0
如果您对使用插件感兴趣，可以查看isteven multi select。值得用它

标签： javascript angularjs select dropdown

【解决方案1】：

var demoApp = angular.module('myApp', []);
demoApp.controller('QaController', function($scope, $http) {
    $scope.loopData = [];

   $scope.loopData = [{ 
        model: null,
        question : "",
        availableOptions: [
            {id: '1', name: 'What is your childhood name?',disable : false},
            {id: '2', name: "What is your first school?",disable : false},
            {id: '3', name: "What is your first job place?",disable : false},
            {id: '4', name: "What is your pet name?",disable : false}
        ]
    },{ 
        model: null,
        question : "",
        availableOptions: [
            {id: '1', name: 'What is your childhood name?',disable : false},
            {id: '2', name: "What is your first school?",disable : false},
            {id: '3', name: "What is your first job place?",disable : false},
            {id: '4', name: "What is your pet name?",disable : false}
        ]
    }]
 
    $scope.changItem = function(index,_id){ 
      $scope.loopData = $scope.loopData.map(function(obj,i){
      debugger
        if(i > index){
          obj.availableOptions.map(function(item){
            if(item.id == _id ){
              item.disable = true
            }else{
              item.disable = false
            }
            return item
          })
        }else{ debugger
          obj.availableOptions.map(function(item){
          debugger
            if(item.id == _id ){
              item.disable = true
            }else{
              item.disable = false
            }
            return item
          }) 
        }
        return obj
      });
    }
    $scope.submit = function() {
        $scope.result = $scope.loopData;
    };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<body ng-app="myApp">
        <div class="wrapper wrapper-content middlealigen col-sm-12" ng-controller="QaController">
            <form ng-submit="submit();">
                <div ng-repeat="x in loopData track by $index"> 
                    <h5>Q. {{$index + 1}}</h5>{{x.modelVal}}
 <select 
                    ng-change="changItem($index,x.question)" ng-model="x.question" >
   <option value="">Select Question</option>
   <option ng-disabled="option.disable"  ng-repeat="option in x.availableOptions" value="{{option.id}}">{{option.name}}</option>
</select>
                    <input type="text" placeholder="Enter Answer" name="answer" class="form-control" ng-model="x.answer" />
                    <div class="m-b"></div>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>

            <div ng-if="result">
                <pre>{{result | json}}</pre>
            </div>

        </div>
    </body>

【讨论】：

嗨，我看到了你的代码 sn-p。一切正常，但有点错误。我在Q.1 中选择了What is your first job place?，我看到Q.2 中禁用了此选项，这很好。但是Q.2 当我选择其他选项时，如What is your pet name? 然后再次想更改Q.2 我看到有启用What is your first job place? 之前已经在Q.1 中选择了一个@

【解决方案2】：

您可以创建一个自定义的filter，使其更加通用（用于更多选择输入）。

过滤器可以是：

.filter('excludeEqualAnswers', function() {
  return function(input, index, selectedQuestions) {

    if (!selectedQuestions[index].question) {
      function notExistInSelectedQuestions(output) {
        return !selectedQuestions.map(val => val.question).includes(output.id);
      }

      return input.filter(notExistInSelectedQuestions);
    } else {
      return input
    }
  }
})

然后您可以根据您的自定义filter 过滤您选择输入的options，如下所示：

 <select  class="form-control" name="question-drop" id="question_dropdown" ng-model="x.question" ng-options="option.id as option.name for option in questions.availableOptions | excludeEqualAnswers:$index:loopData">
        <option value="">Select Question</option>
      </select>

这是一个有效的fiddle

【讨论】：