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

Question

我想知道是否可以将部分附加到视图中，而不是替换前一个。

用例如下：

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

也许使用一个部分的问题不是要走的路，在这种情况下，请让我知道首选方法是什么（香草/无角度 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 提供的数据绑定功能。