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

ng-repeat items from a javascript object not repeating in the expected order

本文关键字：顺序 javascript 重复 对象 ng      更新时间：2024-05-28

我有以下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重复div嵌套在其他几个重复div中。我可以提供更多这些项目所包含的较大javascript对象，或者在必要时提供更多HTML。

非常感谢您抽出时间。

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

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/

希望你会发现它有用。

相关文章：