javascript - AngularJS 跟进子逻辑

Question

我遇到以下情况，我正在构建一个测验，我有一些问题，有些问题有子问题，具体取决于您的回答，我希望显示与答案相对应的问题。

例如:

Question title:

1. Answer 1
   • Another question with answers 1
2. Answer 2
   • Another question with answers 2

因此，当您按“答案 1”时，您将看到“另一个带有答案 1 的问题”，或者如果您按“答案 2”，您将看到“另一个带有答案 2 的问题”

我的应用程序结构如下所示:

 $scope.currentIndex = 0;
 $scope.questions = [{
        title: 'Question title',
        choices: ['Answer 1', 'Answer 2'],
        extra: {
            childs: [{
                link: 'answer-1',
                title: 'Another question with answers 1',
                choices: ['Some answer', 'Some answer 2']
            }, {
                link: 'answer-2',
                title: 'Another question with answers 2',
                choices: ['Some answer', 'Some answer 2']
            }]
        }
    }, {
        title: 'Simple question title',
        choices: ['Answer 1', 'Answer 2']
    }]

在我的 Angular 应用程序中，我使用以下方式显示问题:

ng-repeat="question in questions track by $index" ng-if="isCurrentQuestion($index)"

isCurrentQuestion() 函数如下所示:

$scope.isCurrentQuestion = function(index) {
            return $scope.currentQuestion === index
        };

每次回答问题时，我都会向 $scope.currentIndex 添加 +1 以显示下一个问题。

我不明白的是如何在我的应用程序中显示来自 (question.extra.childs) 的子问题？

也许我的结构不太正确，但我愿意接受想法。

Answer 1

使用嵌套的 ng-repeat 方法来解决您的需求。

    <div ng-repeat="question in questions">
         // Do your logic here
        // use ng-if for your condition, if its true it will show your child elements
        <div ng-if="question.condition" ng-repeat="extraquestions in question.extra.childs">
       // Do your logic here
        </div>
    </div>