ng-重复javascript对象中未按预期顺序重复的项

Question

我有以下HTML：

<div>
    <div  ng-repeat="mod in pTab">
        {{$index}}{{mod.modelGallery}}
    </div>
</div>

pTab对象如下所示：

pTab{
modelData1={
        modelGallery: "Gallery-2";
    }
modelData2={
        modelGallery: "Gallery-3";
    }
modelData3={
        modelGallery: "Gallery-3";
    }
modelData4={
        modelGallery: "Gallery-3";
    }
modelData5={
        modelGallery: "Gallery-3";
    }
modelData6={
        modelGallery: "Gallery-3";
    }
modelData7={
        modelGallery: "Gallery-3";
    }
modelData8={
        modelGallery: "Gallery-1";
    }
modelData9={
        modelGallery: "Gallery-1";
    }
modelData10={
        modelGallery: "Gallery-1";
    }
modelData11={
        modelGallery: "Gallery-1";
    }
modelData12={
        modelGallery: "Gallery-1";
    }
modelData13={
        modelGallery: "Gallery-1";
    }
modelData14={
        modelGallery: "Gallery-1";
    }
modelData15={
        modelGallery: "Gallery-1";
    }
modelData16={
        modelGallery: "Gallery-4";
    }
modelData17={
        modelGallery: "Gallery-4";
    }
modelData18={
        modelGallery: "Gallery-4";
    }
modelData19={
        modelGallery: "Gallery-4";
    }
modelData20={
        modelGallery: "Gallery-5";
    }
modelData21={
        modelGallery: "Gallery-5";
    }
modelData22={
        modelGallery: "Gallery-6";
    }
modelData23={
        modelGallery: "Gallery-6";
    }
modelData24={
        modelGallery: "Gallery-6";
    }
modelData25={
        modelGallery: "Gallery-6";
    }
modelData26={
        modelGallery: "Gallery-6";
    }
modelData27={
        modelGallery: "Gallery-6";
    }
}

我预计页面上的输出将显示以下内容：

0Gallery-2
1Gallery-3
2Gallery-3
3Gallery-3
4Gallery-3
5Gallery-3
6Gallery-3
7Gallery-1
8Gallery-1
9Gallery-1
10Gallery-1
11Gallery-1
12Gallery-1
13Gallery-1
14Gallery-1
15Gallery-4
16Gallery-4
17Gallery-4
18Gallery-4
19Gallery-5
20Gallery-5
21Gallery-6
22Gallery-6
23Gallery-6
24Gallery-6
25Gallery-6
26Gallery-6

但这是实际显示的内容：

0Gallery-2
1Gallery-1
2Gallery-1
3Gallery-1
4Gallery-1
5Gallery-1
6Gallery-1
7Gallery-4
8Gallery-4
9Gallery-4
10Gallery-4
11Gallery-3
12Gallery-5
13Gallery-5
14Gallery-6
15Gallery-6
16Gallery-6
17Gallery-6
18Gallery-6
19Gallery-6
20Gallery-3
21Gallery-3
22Gallery-3
23Gallery-3
24Gallery-3
25Gallery-1
26Gallery-1

期望它们以与它们在包含它们的javascript对象中出现的顺序相同的顺序重复是错误的吗？如何对此进行监管？我搜索了一些关于groupBy过滤器的问题，但它似乎不是我需要的。

我应该假设这种影响来自我的代码中的其他地方吗？例如，此ng-repeat div嵌套在两个其他重复的div中。我可以提供更多包含这些项目的更大的javascript对象，如果需要的话，也可以提供更多的HTML。

非常感谢您的宝贵时间。

Answer 1

在Angular的ng-repeat中，对象是按键排序的，但不是按顺序排序的。我知道您需要迭代对象的键/值对，保持声明属性的顺序。创建一个对键进行排序的函数：

JS

$scope.notSorted = function(obj){
    if (!obj) {
        return [];
    }
    return Object.keys(obj);
}

HTML

      <div ng-repeat="mod in notSorted(data)" ng-init="value = pTab[mod.modelGallery]">
       <pre>
           {{$index}}{{mod.modelGallery}}
       </pre>           
   </div>

此代码部分复制自http://jsfiddle.net/DnEXC/

希望你会发现它是有用的。