如何通过单击下一步按钮使用 Angular js 将具有不同数据的同一页面转到 laravel

Posted 2023-03-14

【中文标题】如何通过单击下一步按钮使用 Angular js 将具有不同数据的同一页面转到 laravel

【英文标题】：how to go to same page with different data into laravel using angular js by clicking next button

【发布时间】：2019-01-26 17:12:34

【问题描述】：

我有 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,

我想在同一页面上回答下一个问题，而无需通过单击页面上的下一步按钮来重新加载页面 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>

如何在我的应用中获得这种类型的功能？

【参考方案1】：

您可以在 Blade 中的 @foreach 中使用 $key => $value 表示法来获取 JSON 中值的索引，然后使用 ng-show 指令在控制器中使用您的范围变量来显示它。

例如：

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

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

【讨论】：

好的，抱歉，但我没有注意到您的 current 变量是一个对象，那么您的数字索引是 current.index 而不仅仅是 current，您之前的按钮也不是指ng-click 中的正确功能。答案已编辑