禁用ng的清除单选按钮
[英]Clear Radio Button on ng-disabled
问题描述
下面是我如何实现代码的方法，该代码是根据所选的其他单选答案从Ng-repeat隐藏单选按钮修改的。 我需要帮助的是清除/禁用该答案时清除单选按钮。
如果用户以Q3开始并选择了答案31，然后返回到Q1并选择了答案11，则问题.selectedAnswer仍显示为答案31。
任何帮助表示赞赏
var app = angular.module('plunker', []); app.controller('MainCtrl', ['$scope', function($scope) { function getAnswer(qid, aid) { var qs = $scope.questions, q; for (var i = 0; i < qs.length; ++i) { if (qs[i].qid === qid) { q = qs[i]; break; } } if (q) { var as = q.Answer; for (i = 0; as.length; ++i) { if (as[i].aId === aid) { return as[i]; } } } } function doRemove(q, a) { if (a.removes && a.removes.length) { for (var i = 0; i < a.removes.length; ++i) { var r = a.removes[i], answer = getAnswer(r.qid, r.aId); if (answer) { answer.isDisabled = (q.selectedAnswer == a.answertxt); } } } } $scope.select = function (q, a) { var as = q.Answer; for (var i = 0; i < as.length; ++i) { var answer = as[i]; doRemove(q, answer); } }; $scope.questions = [{ questiontxt: 'Please select your Age range', qid: 1234, Answer: [{ answertxt: "answer11", aId: 83493, hides: [{ qid: 5678, aId: 67107 }], removes: [{ qid: 4321, aId: 32342 }] }, { answertxt: "answer12", aId: 1223, }, { answertxt: "answer13", aId: 1223 }] }, { questiontxt: 'Please select your favorite activity', qid: 5678, Answer: [{ answertxt: "answer21", aId: 90886 }, { answertxt: "answer22", aId: 67107 }] }, { questiontxt: 'Please select your favorite food', qid: 4321, Answer: [{ answertxt: "answer31", aId: 32342 }, { answertxt: "answer32", aId: 79130 }] } ]; } ]);
<!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script> document.write('<base href="' + document.location + '" />'); </script> <link rel="stylesheet" href="style.css" /> <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"></script> <script src="script.js"></script> </head> <body ng-controller="MainCtrl"> <div ng-repeat="question in questions"> <div class="row"> <br/><span>Q{{$index+1}}. {{question.questiontxt}}</span> </div> <div ng-repeat="answer in question.Answer"> <div ng-if="!answer.isDisabled"> <input type="radio" ng-change="select(question, answer)" ng-disabled="answer.isDisabled" ng-model="question.selectedAnswer" ng-value="answer.answertxt" /> <span>{{answer.answertxt}}</span> </div> </div> </div> </body> </html>
更新
我想确保我的意图是明确的。
如果用户从Q1开始并在Q1中选择“ answer11”，则可以看到在Q3中“ answer31”消失了。 用户无法选择“ answer31”
但是，如果用户从Q3开始并在Q3中选择“ answer31”，则即使用户在Q1中选择了“ answer11”，答案仍然被选择（这使答案消失了）。 在后端，“ answer31”仍处于选中状态。
请让我知道这是否有意义。 查看收到的答案之一，解决方案可能是隐藏Q3，直到在Q1中做出选择为止。 这可能是一个不同的问题。
1 个解决方案
解决方案1
2 已采纳 2017-12-01 04:21:26
我不确定我是否完全了解您的目的。
但是我做了一个小提琴，可能会为您提供帮助。
$scope.showQuestion = function(index, answer){
$scope.answerArr.length = index;
var questionNum = 0; // for innitializing radio after this question
angular.forEach($scope.questions, function(question){
if(index < questionNum){
delete question.selectedAnswer;
}
questionNum++;
});
$scope.answerArr.push(answer);
};
这是你想做的吗？
如果没有，请给我一些反馈。
我希望我已经了解了您想要的东西，而这个小提琴对于您的目的来说还很接近完美。 :)
。
。
。
更新
首先，对您对我的误解感到抱歉。
我想这次，我带给您的小提琴几乎符合您的意图。
您可以测试“ Q1”或“ Q2”的复选框。
但是在这种$scope.questions ，处理$scope.questions的方式与您不同。
因此，即使我在每行中添加了注释，也可能很难理解我的代码。
而且，我开始编程的时间很短，您可能会认为这是一种“硬编码”。 ：d
。
。
UPDATED2
我只是希望这可以对您有所帮助，或者为您带来一个好提示。
ng-disabled在按钮中不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.