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

我的 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","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"

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

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

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

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

猜你在找的Angularjs相关文章