当数组是服务内部对象的属性时，如何在页面上逐个显示数组元素

how to show array element one by one on page while array is property of an object which inside of services

本文关键字：数组元素 显示 服务 数组 内部对象 属性      更新时间：2023-09-26

我在Services:中有一个testPaper对象

this.testPapers=[{
        courseName: 'Languages' , moduleName: 'Arabic',
        paperName: 'Arabic-V',
        paperDate: '15/08/2014',
        // paperStartTime:
        //papertEndTime:
        // PaperDuration:     '00:10:00',
        marksForEachQuestion: 5,
        totalMarks: 15,
        Question: ['Mirwaha meaning in English?','Jwwaz meaning in English?','Hafila meaning in English?']
    }

而控制器：

  .controller('questionStart',function($scope, $routeParams,$rootScope,crudService){
  //          $scope.allCourses= crudService.courses;
//            $scope.allModules=crudService.modules;
            $scope.allTestPapers=crudService.testPapers;
}

和UI

 <ol>
            <li data-ng-repeat="p in allTestPapers | filter : mSelectedCourse
                                                   | filter:  mSelectedModule
                                                   | filter : mSelectedPaper">
                <hr>
                <div class="row">
                    <div class="col-xs-12 col-sm-3">
                        Paper Name  :<b>{{p.paperName}}</b>
                    </div>
                    <div class="col-xs-12 col-sm-3">
                        Total Marks:<b>{{p.totalMarks}}</b>
                    </div>
                    <div class="col-xs-12 col-sm-3">
                        Marks For Each Question: <b>{{p.marksForEachQuestion}}</b>
                    </div>
                    <div class="col-xs-12 col-sm-3">
                        Total Question: <b>{{p.Question.length}}</b>
                    </div>
                </div>
                <hr>
                <h4>{{p.Question}}</h4>
<!--Which logic need to put in above line to not show all question at once instead one at a time

当用户点击一个按钮时，下一个问题将显示？？？如何做到这一点-->

    <button data-ng-click="">next</button>
            </ol>

现在，我想在页面上逐个显示问题数组（意思是从0到最后一项，但在页面上显示一个问题，然后点击按钮我想更改问题）。我怎样才能做到这一点；

因此，以下是您应该如何处理它，从UI开始，UI将有一个问题标题、一个答案输入框和一个下一个按钮：

<h3 id='q'>Questions will appear here<h3>
Answer: <input type:'text' id='a'><br>
<button onclick="showQuestion()">Next</button>

然后是你的tesPapers，在这个例子中，我使用了两篇论文：

var testPapers = [{
        courseName: 'Languages' , moduleName: 'Arabic',
        paperName: 'Arabic-V',
        paperDate: '15/08/2014',
        // paperStartTime:
        //papertEndTime:
        // PaperDuration:     '00:10:00',
        marksForEachQuestion: 5,
        totalMarks: 15,
        Question: ['Mirwaha meaning in English?','Jwwaz meaning in English?','Hafila meaning in English?']
},{
        courseName: 'Languages' , moduleName: 'Arabic',
        paperName: 'Arabic-V',
        paperDate: '15/08/2014',
        // paperStartTime:
        //papertEndTime:
        // PaperDuration:     '00:10:00',
        marksForEachQuestion: 5,
        totalMarks: 15,
        Question: ['Mirwaha meaning in English?','Jwwaz meaning in English?','Hafila meaning in English?']
}];

现在所有的问题逻辑，很简单。。你需要两个计数器，一个用于纸张编号，另一个用于问题编号。。当当前论文的问题结束时，您需要增加论文编号，当所有论文结束时，只需显示所有论文的结束。

var paperNumber = 0;
var questionNumber = 0;
function showQuestion(){
    document.getElementById('q').innerHTML = testPapers[paperNumber].Question[questionNumber];
    questionNumber++;
    if(questionNumber > testPapers[paperNumber].Question.length){
        document.getElementById('q').innerHTML = "End of this Paper";
        questionNumber = 0;
        paperNumber++;
        if(paperNumber >= testPapers.length){
                    document.getElementById('q').innerHTML = "End of All Papers";
        }
    }
}

当然，你可以随心所欲地更改UI，但核心逻辑应该保持不变，特别是问答循环机制。

请参阅此处的演示

您需要将服务注入到所需视图的控制器中。然后你应该能够使用ng重复指令：

<p ng-repeat="quest in serviceName.testPaper[0].Question">{{quest}}</p>

根据注释进行编辑：在控制器中：

var index = 0;
$scope.currentQuestion = serviceName.testPaper[0].Question[index];
$scope.nextQuestion = function() {
  $scope.currentQuestion = serviceName.testPaper[0].Question[index+1];
};

在html 中

<p>{{currentQuestion}}</p>
<button ng-click="nextQuestion()">Next Question</button>
相关文章：