AngularJS disable dropdown option which previously selected

后端未结

关注

 2  1925

梦毁少年i

相关标签:

2条回答

忘掉有多难

2021-01-25 07:47

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>

0 讨论(0)

别跟我提以往

2021-01-25 07:56

You might create a custom filter to be more generic (for more select inputs).

The filter could be:

.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
    }
  }
})

Then you can filter the options of your select input based upon your custom filter like this:

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

Here's a working fiddle

0 讨论(0)

热议问题