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

我对你的fiddle做了一些修改：jsfiddle.net/adamjld/r9usr4g1/3/

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

Answer 2

请确保您拥有这样的代表，而不是您的代表。

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

如果你track by $index，你会知道它会按照数组显示的顺序显示，而不是按字母顺序显示。由于对象将按字母顺序显示。

Answer 3

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

{"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}

对象键的顺序：

"0", "10", "15", "20"..

请注意，这些键被视为字符串而不是整数，因此排序是按键的字母顺序进行的。

Answer 4

正如我在评论中提到的：这里的问题是 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

ng-repeat 的意外结果

Unexpected outcome of ng-repeat

javascript

angularjs

ng-repeat

angularjs-ng-repeat