AngularJS禁用以前選擇的下拉選項

Question

 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="mb"></div> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> <div ng-if="result"> <pre>{{result | json}}</pre> </div> </div> </body>

你能查一下我的代碼片段嗎？ 這是兩個下拉列表。 如果我選擇What is your childhood name? 從Q. 1下拉列表開始，此選項應在Q. 2下拉列表中禁用。 我怎樣才能做到這一點？

Answer 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="mb"></div> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> <div ng-if="result"> <pre>{{result | json}}</pre> </div> </div> </body>

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

這是一個工作小提琴

AngularJS禁用以前選擇的下拉選項

問題描述

2 個解決方案

解決方案1
2 2017-02-24 07:56:57

解決方案2
1 2017-02-24 08:45:05

AngularJS禁用以前選擇的下拉選項

問題描述

2 個解決方案

解決方案1 2 2017-02-24 07:56:57

解決方案2 1 2017-02-24 08:45:05

解決方案1
2 2017-02-24 07:56:57

解決方案2
1 2017-02-24 08:45:05