javascript - ng-repeat将空白行返回到表中

我正在尝试使用http.get（）从Django rest框架API用JSON数据填充表。我似乎无法获得它返回除我具有数据的空白行数以外的任何内容。即有9个预订，我得到9个空白行。我确实从控制台上的服务器获取了数据。我无法弄清楚我在做什么错！

<html ng-app="myReservation" ng-controller="myReservationController">
<head>
  <meta charset="utf-8">
  <title>Waitlist</title>
    {% load staticfiles %}

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>


</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <table  class="table table-striped table-bordered" style="width:100%">

              <thead>
                <tr>
                  <th>id</th>
                  <th>Name</th>
                  <th>Party Size</th>
                  <th>Date</th>
                  <th>Time</th>
                  <th>Location</th>
                  <th>Status</th>
                </tr>
              </thead>
                <tbody>
                  <tr ng-repeat="x in reservationsData">
                    <td>{{ x.id }}</td>
                    <td>{{ x.name }}</td>
                    <td>{{ x.psize }}</td>
                    <td>{{ x.Date }}</td>
                    <td>{{ x.Time }}</td>
                    <td>{{ x.location }}</td>
                    <td>{{ x.status }}</td>
                  </tr>
                </tbody>

        </table>
      </div>
    </div>
  </div>

    <script src="//code.jquery.com/jquery-3.3.1.js"></script>

    <label class="col-md-4 control-label" for="makeReservation"></label>
          <div class="col-md-4">
            <button name="singlebutton" class="btn btn-primary" type="submit" ng-click="getData()" id="makeReservation">getData!</button>
          </div>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
  <script src="{% static 'app/scripts/reservations.js' %}"></script>
</body>

app.controller('myReservationController', function ($scope, $http) {
    $scope.saveData = function () {
        var dte = Date.parse($scope.dateInput);
        var newdte = new Date(dte).toISOString().slice(0, 10);
        var data = { name: $scope.nameInput,
                     psize: $scope.psizeInput,
                     Date: newdte,
                     Time: $scope.timeInput,
                     location: $scope.locationInput,
                     status: $scope.statusInput
        }

        $http.put('/reservations/reservations/', data).then(
            function successCallback(data) {
                alert('Your Reservation was made!');
                window.location.reload();
            }, function errorCallback(data) {
                alert("Sorry, we could not make your reservation at this time")
            });


    $scope.getData = function (data) {
        $scope.reservationsData = []
        $http.get("/reservations/reservations/")
            .then(function (result) {
                $scope.reservationsData = result.data.results;
                console.log($scope.reservationsData)
            });
    }
});

}

此代码产生九个空白行。

我可以将数据发送到控制台，但需要将其放入表中，最终需要能够内联编辑该数据。（长期目标）

最佳答案

您在myReservationController中缺少大括号，
$ scope.saveData没有关闭。
$ scope.getData函数需要一个“数据”变量
您在自己的答案中所做的事情是错误的。一旦您第二次使用“ angular.module（'myApp'，[]）”，它将使第一个无效。
而且，我认为您无法在控制器内调用“ angular.module（'myApp'，[]）”

它现在正在以某种方式起作用，但是将来会引起问题。

关于javascript - ng-repeat将空白行返回到表中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57155532/