我使用Chartjs在离子应用程序中绘制图表。一切正常，除了它呈现了最后一个循环。可以说有[0,1,2]个对象，它仅渲染2个，很好地使用ng-repeat，因为数组中有3个对象，所以它重复了3次。请附加我的视图和控制台日志。
安慰：
应用程式检视：
脚本：
for(i in blogs.data) {
if(blogs.data[i].post_type_id == 3) {
var chartdraw = JSON.parse(blogs.data[i].chart.data);
if(blogs.data[i].chart.chart_type_id == 1){
$scope.pieData = chartdraw;
$log.info('pieData:',$scope.pieData);
}
else if(blogs.data[i].chart.chart_type_id == 2){
$scope.barData = chartdraw;
$log.info('barData:',$scope.barData);
}
else if(blogs.data[i].chart.chart_type_id == 3){
$scope.lineData = chartdraw;
$log.info('lineData:',$scope.lineData);
}
else if(blogs.data[i].chart.chart_type_id == 4){
$scope.numberData = chartdraw;
$log.info('numberData:',$scope.numberData);
}
}
}
视图：
<div class="card image" ng-if="blog.post_type_id == 3" >
<a href="#/app/home/{{blog.id}}">
<div class="thumb">
<div>
<canvas piechart options="chartOptions" data="pieData" width="150" height="150" ng-if="blog.chart.chart_type_id == 1">
</canvas>
<canvas barchart options="chartOptions" data="barData" width="150" height="150" ng-if="blog.chart.chart_type_id == 2">
</canvas>
<canvas linechart options="chartOptions" data="lineData" width="150" height="150" ng-if="blog.chart.chart_type_id == 3">
</canvas>
<div ng-if="blog.chart.chart_type_id == 4">
<p ng-bind-html="numberData.details[0].value"></p>
<p ng-bind-html="numberData.details[0].label"></p>
</div>
</div>
<div class="text-center cat-icon">
<span class="icon-wrapper">
<i class="icon ion-stats-bars" style="position:relative;"></i>
</span>
</div>
</div>
<h4 class="title">{{blog.title}}</h4>
<p class="details"><i class="icon ion-calendar"></i> {{blog.created_at}}</p>
</a>
</div>
最佳答案
这是怎么回事-每个博客帖子中的图表（图片中的所有图表恰好都是饼图）绑定到3个对象之一，具体取决于图表类型（对于图片，其$ scope.pieData用于所有对象）图表）
其余是角度如何工作的结果-与$ scope.pieData的值无关紧要-在更新$ scope.pieData时，角度更新了对$ scope.pieData的所有引用（因此，图表将更新为好）。
在您的情况下，您将在循环中不断对其进行更新，因此在循环结束时$ scope.pieData是最后一篇文章中的内容，因此所有图表都具有该数据。每个图表需要一个作用域变量
这是一支代码笔，说明了您的情况-http://codepen.io/anon/pen/doOqjN（我删除了chartjs以使其更清楚）-请注意所有值均为3000。
这是带有修复程序的-http://codepen.io/anon/pen/MwbqBM。请注意，这些值现在都不同了。我唯一更改的行是<div ng-if="blog.chart.chart_type_id == 1">{{blog.chart.data}}</div>
<div ng-if="blog.chart.chart_type_id == 2">{{blog.chart.data}}</div>
<div ng-if="blog.chart.chart_type_id == 3">{{blog.chart.data}}</div>
实际上，您不需要整个脚本块！
您可能还可以进行更多优化，而我实际上并没有对numberData.details做任何事情，因为我不确定它的用途。