javascript - ng-repeat 的意外结果

Question

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

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

给定这个示例集，我希望得到比 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}

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

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

亲切的问候， 帕特里克

Answer 1

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

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

myApp.filter('toArray', function () {

return function (obj) {
    console.log(obj)
    if (!(obj instanceof Object)) {
        return obj;
    }
    var result = [];
    angular.forEach(obj, function(obj, key) {
        obj.$key = key;
        result.push(obj);
    });
    return result;
  }
});

UPDATED JSFIDDLE