纳克-重复的意外结果

Question

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

它运行得很好，但在绘制具有扩展宽度和降低不透明度的条形图时，有一种意想不到的行为。它们是由"0-4“或”5-9“范围内的每个结果之和计算的。

给出了这个示例集，我期望得到另一个结果，而不是ng-重复生成。

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

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

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

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;
  }
});

更新的JSFIDDLE

Answer 2

而不是你的表示法，你要确保它像这样。

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

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

Answer 3

这是因为根据对象键将对象重新格式化为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"..

注意，这些键被视为刺，而不是int，所以排序是按键的字母顺序进行的。