我正在学习角色，所以如果这是一个基本问题，请原谅。我想根据之前的问题答案隐藏问题。例如，如果用户选择answer11和Q2，则首先出现Q1。如果用户选择answer12 Q2则不会出现。我还想确保清除单选按钮。基本上创建一个工作流程。从以前的问题我可以在模型中提出隐藏问题的解决方案。
var app = angular.module('plunker', []);
app.controller('MainCtrl', ['$scope',
function($scope) {
$scope.questions = [{
questiontxt: 'Please select your Age range',
qid: 1234,
Answer: [{
answertxt: "answer11",
aId: 83493,
removes: [{
qid: 5678,
}]
}, {
answertxt: "answer12",
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="app.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">
<input type="radio" value="{{answer.answertxt}}{{$parent.$index}}" ng-model="question.selectedAnswer" ng-value="{{answer.answertxt}}" />{{answer.answertxt}}
</div>
</div>
</body>
</html>
更新
我正在更新问题因为我不清楚。如果用户在Q1中选择answer11，则会出现Q2。如果用户选择answer12，则Q2消失，但Q3仍然可见。 Q2出现的唯一方法是用户选择answer11。我试图根据放入模型的内容创建问题之间的依赖关系。
答案 0 :(得分：0)
只需创建一个迭代器，并在每次回答问题时递增 - 就像这样：
var app = angular.module('plunker', []);
app.controller('MainCtrl', ['$scope',
function($scope) {
$scope.questionNo = 0;
$scope.questions = [{
questiontxt: 'Please select your Age range',
qid: 1234,
Answer: [{
answertxt: "answer11",
aId: 83493,
removes: [{
qid: 4321,
}]
}, {
answertxt: "answer12",
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
}]
}
];
$scope.incrementQuestionNo = function() {
if ($scope.questionNo != $scope.questions.length-1)
{
$scope.questionNo++;
}
}
}
]);<!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="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div>
<div class="row">
<br/><span>Q{{questionNo+1}}. {{questions[questionNo].questiontxt}}</span>
</div>
<div ng-repeat="answer in questions[questionNo].Answer">
<input type="radio" ng-model="questions[questionNo].selectedAnswer" ng-change="incrementQuestionNo()" ng-value="{{answer.answertxt}}" />{{answer.answertxt}}
</div>
</div>
</body>
</html>
Btw，ng-value和value是互斥的。阅读此answer。
答案 1 :(得分：0)
使用bool值向question数组添加属性以显示/隐藏。并使用ng-change相应地更新它。
var app = angular.module('plunker', []);
app.controller('MainCtrl', ['$scope',
function($scope) {
$scope.questions = [{
questiontxt: 'Please select your Age range',
qid: 1234,
show: true,
Answer: [{
answertxt: "answer11",
aId: 83493,
removes: [{
qid: 4321,
}]
}, {
answertxt: "answer12",
aId: 1223
}]
},
{
questiontxt: 'Please select your favorite activity',
qid: 5678,
show: false,
Answer: [{
answertxt: "answer21",
aId: 90886
}, {
answertxt: "answer22",
aId: 67107
}]
},
{
questiontxt: 'Please select your favorite food',
qid: 4321,
show: false,
Answer: [{
answertxt: "answer31",
aId: 32342
}, {
answertxt: "answer32",
aId: 79130
}]
}
];
$scope.updateQuestions = function(index){
// you write the rest
// use the index to get the current question
// get the selected answer
// set the next question's show to true or false
// for example (not a solution)
if(index === 0){
$scope.questions[1].show = true;
}
}
}
]);<!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="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="question in questions track by $index">
<div ng-if="question.show">
<div class="row">
<br/><span>Q{{$index+1}}. {{question.questiontxt}}</span>
</div>
<div ng-repeat="answer in question.Answer">
<input type="radio" value="{{answer.answertxt}}{{$parent.$index}}" ng-model="question.selectedAnswer" ng-value="{{answer.answertxt}}" ng-change="updateQuestions($index)" />{{answer.answertxt}}
</div>
</div>
</div>
</body>
</html>