AngularJS禁用先前選定

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>

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

來源

2017-02-24 Chinmay235

[相關]（http://stackoverflow.com/questions/41409927/how-to-hide-specific-selected-options-in-other-select-dropdown/41411241#41411241）。 – ChiefTwoPencils

@ Chinmay235你正在使用哪種角度版本？ –

@GangadharJannu我正在使用AngularJS v1.5.0 – Chinmay235

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>

來源

2017-02-24 07:56:57

嗨，我看到了你的代碼片段。一切工作正常，但一點點的錯誤。我在'Q.1'中選擇了'你的第一個工作地點是什麼？'，我發現'Q.2'中的這個選項是無效的。但是，當我選擇其他選項時，例如「你的寵物名稱是什麼？」，然後又想在「Q.2」中更改，我看到「你的第一個工作地點是什麼？在'Q.1'中 – Chinmay235

您可以創建一個自定義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

來源

2017-02-24 08:45:05 Korte

AngularJS禁用先前選定

回答

相關問題