如何通過單擊下一步按鈕使用Angular js轉到具有不同數據的同一頁面到laravel

Question

我有包含問題數據的JSON數據是

{
    "id": 51,
    "question_title": "this is title of Write Essay",
    "media_type": null,
    "media_link": null,
    "question": "This is summary of the write essay of the questions. This will show the questions of the write essay.",
    "categoryID": 2,
    "subcategoryID": 7,


},
{
    "id": 54,
    "question_title": "this is title of Write Essay",
    "media_type": null,
    "media_link": null,
    "question": "This is questions. This will show the questions of the write essay with the title of the array and the question of the data",
    "categoryID": 2,
    "subcategoryID": 7,

}

我想在同一頁面上下一個問題，而不通過單擊頁面上的next按鈕來重新加載頁面JST。
我的html代碼是

@foreach($question as $qus)
<div id="question" style="display: none;">{{$qus->question}}</div>
@endforeach

<!-------------------------------------Content section starts here------------------------------------>
<div class="container-fluid" ng-app="summarize-written-text">
  <div id="written-text">
    <div class="row">
      <div class="col-sm-10 col-sm-offset-1 col-lg-10 col-lg-offset-1" ng-controller="summarizeController">
        <div class="row">
          <div class="col-lg-12">
            <div class="consume-time text-right">00:00:10</div>
            <p class="note">@{{current.Note}}
            </p>
            <div ng-repeat="d in current.Info">
              <p>@{{d.Value}}</p>
            </div>
            <div class="form-group">
              <textarea class="form-control" rows="5" id="comment" ngclipboard></textarea>
            </div>

          </div>
        </div>
        <div class="row text-center">
          <div class="col-lg-4 col-sm-4 col-xs-4">
            <button class="btn btn-primary" ngclipboard data-clipboard-target="#comment" data-clipboard-action='cut'>Cut</button>
          </div>
          <div class="col-lg-4 col-sm-4 col-xs-4">
            <button class="btn btn-primary" ngclipboard data-clipboard-target="#comment" data-clipboard-action='copy'>Copy</button>
          </div>
          <div class="col-lg-4 col-sm-4 col-xs-4">
            <button class="btn btn-primary" ngclipboard data-clipboard-target="#comment" data-clipboard-action='paste'>Paste</button>
          </div>
        </div>
        <div class="bottom-section">
          <div class="row">
            <div class="col-lg-6 col-sm-4 col-xs-4">
              <button class="btn btn-primary">Re-start</button>
              <button class="btn btn-primary">Answer</button>
            </div>
            <div class="col-lg-6 col-sm-8 col-xs-8">
              <div class="float-right">
                <button class="btn btn-primary"><i class="fa fa-bars"></i></button>
                <button class="btn btn-primary" ng-click="prevoius()">Previous</button>
                <button class="btn btn-primary">
              <select>
                <option value="0">Select:</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
              </select>
              </button>
                <button class="btn btn-primary" ng-click="next()">Next</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-sanitize.js"></script>
<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngclipboard/2.0.0/ngclipboard.js"></script>

<script>
  var app = angular.module('summarize-written-text', ['ngclipboard']);
  app.controller('summarizeController', function($scope) {
    var question = $("#question").text();
    $scope.Data = [{
      index: 0,
      Note: "1. Read the passage below and summarize it using one sentence. Type your response in the box at the bottom of the screen. You have 10 minutes to finish this task. Your response will be judge on the quality of your writing and on how well your response presents the key points in the passage.",

      Info:

    }, ]

    $scope.current = $scope.Data[0],
      $scope.next = function() {
        var i = $scope.getIndex($scope.current.index, 1);
        $scope.current = $scope.Data[i];
      },
      $scope.previous = function() {
        var i = $scope.getIndex($scope.current.index, -1);
        $scope.current = $scope.Data[i];
      },
      $scope.getIndex = function(currentIndex, shift) {
        var len = $scope.Data.length;
        return (((currentIndex + shift) + len) % len)
      }
  });
</script>

如何在我的應用程序中獲得這種功能？

Answer 1

您可以在Blade的@foreach中使用$key => $value表示法來獲取JSON中值的索引，然后使用ng-show指令在控制器中使用scope變量按需顯示它。

例如：

@foreach($question as $key => $qus)
<div ng-show="current.index == {{$key}}">{{$qus->question}}</div>
@endforeach

避免對HTML中的不同元素使用相同的ID