使用ng-repeat {ANGULAR.JS}加载JSON以显示数据

Question

我的Html:

<div class="graph-display" ng-controller="jsonServerBox">
    <div class="bar-chart-box" ng-repeat="module in ocw.modules"> 
        <canvas class="chart chart-bar" data="{{module.data}}" labels="{{module.labels}}" series="{{module.series}}"></canvas>
    </div>
</div>

我的JS:

app.controller('jsonServerBox', function($scope, $http) {
  var json = $http.get('serverbox.json').then(function(res){
          return res.data;
        });
  $scope.ocw = json;    
    });

图表没有显示,不知道为什么？我也没有在控制台中出现任何错误.

更新:我的JSON文件内容

[{"modules":[
            {
               "series":"SeriesA",
               "data":["90", "99", "80", "91", "76", "75", "60", "67", "59", "55"],
               "labels":["01", "02", "03", "04", "05", "06", "07","08","09","10"]
            },

            {
               "series":"SeriesB",
               "data":["90", "99", "80", "91", "76", "75", "60", "67", "59", "55"],
               "labels":["01", "02", "03", "04", "05", "06", "07","08","09","10"]
            }

    ]}
]

控制台日志:

modules: Array[2]0: Objectdata: Array[10]0: "90"1: "99"2: "80"3: "91"4: "76"5: "75"6: "60"7: "67"8: "59"9: "55"length: 10__proto__: Array[0]labels: Array[10]0: "01"1: "02"2: "03"3: "04"4: "05"5: "06"6: "07"7: "08"8: "09"9: "10"length: 10__proto__: Array[0]series: "SeriesA"__proto__: Object1: Objectdata: Array[10]0: "90"1: "99"2: "80"3: "91"4: "76"5: "75"6: "60"7: "67"8: "59"9: "55"length: 10__proto__: Array[0]labels: Array[10]0: "01"1: "02"2: "03"3: "04"4: "05"5: "06"6: "07"7: "08"8: "09"9: "10"length: 10__proto__: Array[0]series: "SeriesB"

Answer 1

您的代码的问题json是Promise对象而不是从AJAX调用返回的数据.此外,您的问题是"从AJAX请求返回"方面.确保您了解相关问题,请查看这个非常受欢迎的问题.

在Angular中使用AJAX请求设置范围数据的正确方法是在回调内部进行:

app.controller('jsonServerBox', function ($scope, $http) {
    $http.get('serverbox.json').then(function (res) {
        $scope.ocw = res.data;
    });
});