ng-repeat的意外结果

Question

我需要为投票应用创建图表，请参见下图。

它工作得很好，但是在制作具有扩展宽度和降低不透明度的条形时会出现意外行为。它们是通过＆＃34; 0-4＆＃34;中的每个结果的总和来计算的。或＆＃34; 5到9＆＃34;范围。

给出了这个示例集，我期望另一个结果比ng-repeat产生。

{"0":2,"5":4,"10":0,"15":2,"20":1,"25":1,"30":1,"35":0,"40":0,"45":0,"50":0,"55":1,"60":0,"65":0,"70":0,"75":1,"80":7,"85":10,"90":3,"95":0}

这个小提示显示问题：https://jsfiddle.net/r9usr4g1/2/并比较实际和预期结果。

你能解释我的错误和解决方案吗？

亲切的问候， 帕特里克

Answer 1

而不是你的代表，请确保你这样做。

<tr ng-repeat='result in ResultAreaSum track by $index' title="{{ResultAreaSum}}">
        <td>{{ $index + '-' + result}}</td>
</tr>

如果您track by $index，您将知道它将以与数组显示的顺序相同的顺序显示，而不是按字母顺序显示。由于对象将按字母顺序显示。

Answer 2

这是因为角度根据对象键重新格式化对象 对于EX：

img/courses

对象键的顺序：

{"0":2,"5":4,"10":120,"15":2,"20":1,"25":1,"30":1,"35":0,"40":0,"45":0,"50":0,"55":1,"60":0,"65":0,"70":0,"75":1,"80":7,"85":10,"90":3,"95":0}

并注意这些键​​被视为stings而不是int，因此排序是按键的字母顺序完成的。

Answer 3

正如我在评论中提到的：这里的问题是JS Object键默认按字母顺序排序

为避免发生这种情况，您可以使用过滤器。我使用toArray过滤器更新了你的jsfiddle。

$ strace -e trace=open,write ./$APP_NAME

UPDATED JSFIDDLE

Answer 4

我对你的小提琴做了一些改动：jsfiddle.net/adamjld/r9usr4g1/3 /

最好将数据存储在控制器而不是HTML中。另外，使用数组而不是对象。