javascript - Angular JS 在 django 中转换 2 个暗淡的 JSON

Question

我有一个二维 JSON，我想将其转换为 html 表。像这样的:http://www.bogotobogo.com/AngularJS/AngularJS_Tables.php

我听说过序列化(ng-compile)，但这不是太多的工作吗？它将如何运作？

[{"model": "pricing.cashflow", "pk": 1, "fields": {"value": 4.0, "date": "2016-09-09"}}, {"model": "pricing.cashflow", "pk": 2, "fields": {"value": 3.0, "date": "2016-09-01"}}, {"model": "pricing.cashflow", "pk": 3, "fields": {"value": 3.0, "date": "2016-09-01"}}, {"model": "pricing.cashflow", "pk": 4, "fields": {"value": 3.0, "date": "2016-09-01"}}, {"model": "pricing.cashflow", "pk": 5, "fields": {"value": 3.0, "date": "2016-09-01"}}, {"model": "pricing.cashflow", "pk": 6, "fields": {"value": 5.0, "date": "2016-09-07"}}, {"model": "pricing.cashflow", "pk": 7, "fields": {"value": 3.0, "date": "2016-09-28"}}, {"model": "pricing.cashflow", "pk": 8, "fields": {"value": 3.0, "date": "2016-09-22"}}, {"model": "pricing.cashflow", "pk": 9, "fields": {"value": 5.0, "date": "2016-09-16"}}, {"model": "pricing.cashflow", "pk": 10, "fields": {"value": 5.0, "date": "2016-09-16"}}, {"model": "pricing.cashflow", "pk": 11, "fields": {"value": 4.0, "date": "2016-09-08"}}, {"model": "pricing.cashflow", "pk": 12, "fields": {"value": 8.0, "date": "2016-09-22"}}, {"model": "pricing.cashflow", "pk": 13, "fields": {"value": 3.0, "date": "2016-09-22"}}, {"model": "pricing.cashflow", "pk": 14, "fields": {"value": 5.0, "date": "2016-09-01"}}, {"model": "pricing.cashflow", "pk": 15, "fields": {"value": 8.0, "date": "2016-09-01"}}, {"model": "pricing.cashflow", "pk": 16, "fields": {"value": 4.0, "date": "2016-09-08"}}, {"model": "pricing.cashflow", "pk": 17, "fields": {"value": 5.0, "date": "2016-09-09"}}, {"model": "pricing.cashflow", "pk": 18, "fields": {"value": 5.0, "date": "2016-09-09"}}, {"model": "pricing.cashflow", "pk": 19, "fields": {"value": 5.0, "date": "2016-09-09"}}, {"model": "pricing.cashflow", "pk": 20, "fields": {"value": 3.0, "date": "2016-09-16"}}, {"model": "pricing.cashflow", "pk": 21, "fields": {"value": 3.0, "date": "2016-09-16"}}, {"model": "pricing.cashflow", "pk": 22, "fields": {"value": 3.0, "date": "2016-09-16"}}, {"model": "pricing.cashflow", "pk": 23, "fields": {"value": 3.0, "date": "2016-09-16"}}, {"model": "pricing.cashflow", "pk": 24, "fields": {"value": 3.0, "date": "2016-09-16"}}, {"model": "pricing.cashflow", "pk": 25, "fields": {"value": 8.0, "date": "2016-09-29"}}, {"model": "pricing.cashflow", "pk": 26, "fields": {"value": 3.0, "date": "2016-09-18"}}, {"model": "pricing.cashflow", "pk": 27, "fields": {"value": 4.0, "date": "2016-09-25"}}, {"model": "pricing.cashflow", "pk": 28, "fields": {"value": 4.0, "date": "2016-09-25"}}, {"model": "pricing.cashflow", "pk": 29, "fields": {"value": 4.0, "date": "2016-09-25"}}]

查看:

def get_cashflows(request):
    return HttpResponse(
        serializers.serialize("json", Cashflow.objects.all()),
        content_type="application/json"
    )

js

app.controller('cocogetCtrl',['$scope','$http', function($scope,$http) {

    $scope.getData = function(){
    $http.get("/getcashflow/")
      .success(function(data) {

        });
      });
    };

    setInterval($scope.getData, 1000);
}]);

Answer 1

您可以将数据分配给范围变量并重复表行中的项目。

这是使用 ngRepeat 的示例指令:

(function() {

  angular.module('MyApp', []);

})();

(function() {

  angular.module('MyApp').controller('MyController', MyController);

  MyController.$inject = ['$scope', '$http'];

  function MyController($scope, $http) {

    //$scope.getData = function() {
      //$http.get("/getcashflow/")
        //.success(function(data) {
          //$scope.response = data.data;
        //});
    //};

    //setInterval($scope.getData, 1000);

    // simulating data for illustrative purposes
    $scope.response = [{
      "model": "pricing.cashflow",
      "pk": 1,
      "fields": {
        "value": 4.0,
        "date": "2016-09-09"
      }
    }, {
      "model": "pricing.cashflow",
      "pk": 2,
      "fields": {
        "value": 3.0,
        "date": "2016-09-01"
      }
    }, {
      "model": "pricing.cashflow",
      "pk": 3,
      "fields": {
        "value": 3.0,
        "date": "2016-09-01"
      }
    }, {
      "model": "pricing.cashflow",
      "pk": 4,
      "fields": {
        "value": 3.0,
        "date": "2016-09-01"
      }
    }, {
      "model": "pricing.cashflow",
      "pk": 5,
      "fields": {
        "value": 3.0,
        "date": "2016-09-01"
      }
    }, {
      "model": "pricing.cashflow",
      "pk": 6,
      "fields": {
        "value": 5.0,
        "date": "2016-09-07"
      }
    }, {
      "model": "pricing.cashflow",
      "pk": 7,
      "fields": {
        "value": 3.0,
        "date": "2016-09-28"
      }
    }, {
      "model": "pricing.cashflow",
      "pk": 8,
      "fields": {
        "value": 3.0,
        "date": "2016-09-22"
      }
    }, {
      "model": "pricing.cashflow",
      "pk": 9,
      "fields": {
        "value": 5.0,
        "date": "2016-09-16"
      }
    }, {
      "model": "pricing.cashflow",
      "pk": 10,
      "fields": {
        "value": 5.0,
        "date": "2016-09-16"
      }
    }];
  }

})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div data-ng-app="MyApp">

  <div data-ng-controller="MyController">

    <table>

      <thead>
        <th>PK
          <th>
            <th>Value</th>
            <th>Date</th>
      </thead>

      <tbody>
        <tr data-ng-repeat="data in response">
          <td>{{data.pk}}</td>
          <td>{{data.fields.value}}</td>
          <td>{{data.fields.date}}</td>
        </tr>
      </tbody>

    </table>

  </div>

</div>