我正在尝试使用 http.get() 从我的 Django 休息框架 API 中用 JSON 数据填充一个表。除了我有数据的空白行数之外，我似乎无法让它返回任何东西。即有 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', [])”，它就会使第一个无效。
- 而且，我认为您不能在 Controller 内调用“angular.module('myApp', [])”
它现在以某种方式工作，但将来会导致问题。
关于javascript - ng-repeat 将空白行返回到表中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57155532/