Fatal编程技术网
  • javascript/
  • Javascript ng repeat将空行返回到表中

Javascript ng repeat将空行返回到表中

javascript python angularjs django django-rest-framework

Javascript ng repeat将空行返回到表中,javascript,python,angularjs,django,django-rest-framework,Javascript,Python,Angularjs,Django,Django Rest Framework,我正在尝试使用Django rest框架API中的JSON数据填充一个表，该API使用http.get（）。我似乎无法让它返回除了我有数据的空行数以外的任何内容。i、 有9个预订，我有9个空行。我确实在控制台上从服务器取回了数据。我不知道我做错了什么 <html ng-app="myReservation" ng-controller="myReservationController"> <head> <meta charset="utf-8"> &l

我正在尝试使用Django rest框架API中的JSON数据填充一个表，该API使用http.get（）。我似乎无法让它返回除了我有数据的空行数以外的任何内容。i、 有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>
}

此代码生成九个空行

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

在对所提供的信息进行了一番尝试后，我终于将其正确加载到表中

var app = angular.module('myApp', []).config(function ($httpProvider) {

$httpProvider.defaults.xsrfCookieName = 'csrftoken'
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'

});
app.config(function ($interpolateProvider) {
    $interpolateProvider.startSymbol('{[{');
    $interpolateProvider.endSymbol('}]}');
});
app.controller('theReservationController', function ($scope, $http) {
    angular.module('myApp', []).config(function ($interpolateProvider) {

        $httpProvider.defaults.xsrfCookieName = 'csrftoken'
        $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'
    });

    $scope.getData = function (data) {
        $scope.reservationsData = []
        $http.get("/reservations/reservations/")
            .then(function (result) {
                $scope.reservationsData = result.data.results;
            });
    }
});
不管出于什么原因，我需要创建一个新的js文件和一个新的模块和控制器，但它可以工作！谢谢你的帮助

  • 您的myReservationController中缺少一个花括号， $scope.saveData未关闭
  • $scope.getData函数需要一个“data”变量
  • 你在自己的回答中所做的是错误的。一旦您第二次使用“angular.module（'myApp'，[]），它就会使第一次无效
  • 而且，我认为您不能在控制器中调用“angular.module（'myApp'，[]）”
    • 它现在正在以某种方式工作，但将来会造成问题

    我打赌这是一个与
    {{}
    冲突的后端模板。检查页面源代码并查看这些单元格中的内容我什么也得不到只是hmmmmok…您可以使用不同的符号作为内插括号，请参阅尝试使用“{reservationsData | json}”进行调试。添加此代码并请共享结果，否则如果您共享一个plunker将非常棒。所有精彩之处！我已将其清理干净。我对它的工作感到兴奋，并发布了我的代码。感谢您指出这一点！ 
    var app = angular.module('myApp', []).config(function ($httpProvider) {

$httpProvider.defaults.xsrfCookieName = 'csrftoken'
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'

});
app.config(function ($interpolateProvider) {
    $interpolateProvider.startSymbol('{[{');
    $interpolateProvider.endSymbol('}]}');
});
app.controller('theReservationController', function ($scope, $http) {
    angular.module('myApp', []).config(function ($interpolateProvider) {

        $httpProvider.defaults.xsrfCookieName = 'csrftoken'
        $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'
    });

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