我的
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; }); });
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。