AngularJS：追加部分而不是替换当前视图

Question

我想知道是否可以将视图附加到视图中，而不是替换之前的视图。

用例如下：

• 我正在建立一个问卷
• 在开始问卷调查时，只有1个问题在DOM中可见/
• 问题1的答案决定了问题2应该是什么
• 在回答问题1时，问题2被附加到问题1下的DOM
• 如果更改了问题1，则会从dom重置/删除所有其他问题，并且会出现一个未解决的新问题2（在1下）

也许使用一个部分问题不是要走的路，在这种情况下，请让我知道首选方法是什么（vanilla / no-angular JS？）

Answer 1

给你一个粗略的想法：

鉴于您的应用程序位于angularjs中，您应该在控制器的模型中包含所有问题：

$scope.questions = [
    {
        "question":"foo?",
        "options":["bar1","bar2","bar3","bar4"]
        "answer":2
    },
    {

    },
    {

    }
];

// initially show the 1st question
$scope.currentQuestIndex = 0;

$scope.currentQuestion = $scope.questions[$scope.currentQuestIndex];

并在视图中使用currentQuestion：

<div>Question: {{currentQuestion.question}}</div>

当用户选择正确答案时，您只需更新当前问题：

$scope.submitAnswer = function(){
    // check if the answer is correct
    if(isCorrect){
        $scope.currentQuestion = $scope.questions[$scope.currentQuestIndex + 1];
    }
}

这会动态更新您的视图！感谢angularjs提供的数据绑定功能。