AngularJS禁用以前选择的下拉选项 [英] AngularJS disable dropdown option which previously selected
本文介绍了AngularJS禁用以前选择的下拉选项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< pre class =snippet-code-js lang-js prettyprint-override>
var demoApp = angular.module（'myApp'，[]）; demoApp.controller（'QaController'，function（$ scope） ，$ http）{$ scope.loopData = [{}，{}]; $ scope.questions = {model：null，availableOptions：[{id：'1'，name：'你的童年名字是什么？'}， {id：'2'，名称：你的第一所学校是什么？}，{id：'3'，名称：你的第一份工作地点是什么？}，{id：'4'，名称：什么是你的宠物名字？}]}; $ 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-12ng-controller =QaController> < form ng-submit =submit（）;> < div ng-repeat =x in loopData> < H5> Q。 {{$ index + 1}}< / h5> < select class =form-controlname =question-dropid =question_dropdownng-model =x.questionng-options =option.id as option.name for questions.availableOptions > < option value =>选择问题< / option> < /选择> < input type =textplaceholder =Enter Answername =answerclass =form-controlng-model =x.answer/> < div class =m-b>< / div> < / DIV> < button type =submitclass =btn btn-primary>提交< / button> < /形式> < div ng-if =result> < pre> {{result | JSON}}< /预> < / DIV> < / DIV> < / body>
请检查我的代码段。这是两个下拉列表。
如果我选择你的童年名字是什么？来自 Q. 1 下拉列表然后应在 Q中禁用此选项。 2 下拉列表。我该怎么做？
解决方案
var demoApp = angular.module（'myApp'，[]）; demoApp.controller（'QaController'，function（$ scope，$ http）{$ scope.loopData = []; $ scope.loopData = [{model： null，question：，availableOptions：[{id：'1'，name：'你的童年名字是什么？'，禁用：false}，{id：'2'，名字：你的第一所学校是什么？ ，禁用：false}，{id：'3'，名称：你的第一个工作地点是什么？，禁用：false}，{id：'4'，名称：你的宠物名称是什么？，禁用： false}]}，{model：null，question：，availableOptions：[{id：'1'，name：'你的童年名字是什么？'，禁用：false}，{id：'2'，名字：你的第一所学校是什么？，禁用：false}，{id：'3'，名称：你的第一个工作地点是什么？，禁用：false}，{id：'4'，名称：什么是您的宠物名称？，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-12ng-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 =>选择问题< / option> < option ng-disabled =option.disableng-repeat =x.availableOptions中的选项value ={{option.id}}> {{option.name}}< / option>< /选择> < input type =textplaceholder =Enter Answername =answerclass =form-controlng-model =x.answer/> < div class =m-b>< / div> < / DIV> < button type =submitclass =btn btn-primary>提交< / button> < /形式> < div ng-if =result> < pre> {{result | JSON}}< /预> < / DIV> < / DIV> < / body>
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>
Can you please check my code snippet. Here is two dropdown.
If I select What is your childhood name? from Q. 1 dropdown then this option should be disabled in the Q. 2 dropdown. How can I do that?
解决方案
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>
这篇关于AngularJS禁用以前选择的下拉选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
