Html 嵌套ng重复不'；我不在IE8工作

我在AngularJS 1.2.28中有一个单页应用程序，我正在努力让它在IE8中正常工作

特别是，用于显示以下

MainController

中声明的

bigObject

的嵌套

ng repeat

s存在问题：

angular.module('singlePageApp')
  .controller('MainController',
    ['$scope',
    function ($scope) {
        $scope.showLittleObjectsList = false;
        $scope.bigObject = {
        objects: [
            {
                name: "NAME1",
                metadata: [

                    {index: 0, desc: "metadataQ"},
                    {index: 0, desc: "metadataF"},
                    {index: 1, desc: "metadataZ"},
                    {index: 1, desc: "metadataL"}

                ]
            },
            {
                name: "NAME2",
                metadata: [

                    {index: 0, desc: "metadataH"},
                    {index: 0, desc: "metadataX"}

                ]
            },
            {
                name: "NAME3",
                metadata: [

                    {index: 0, desc: "metadataU"},
                    {index: 1, desc: "metadataG"},
                    {index: 2, desc: "metadataS"},
                ]
            },
            {
                name: "NAME4",
                metadata: [

                    {index: 0, desc: "metadataK"},
                    {index: 1, desc: "metadataR"},
                    {index: 1, desc: "metadataW"},
                    {index: 2, desc: "metadataN"},    
                    {index: 2, desc: "metadataC"}

                ]
            }
            ]
        };
}]);

主HTML块如下所示（请注意，

showLittleObjectsList=false；

在开始时位于控制器中，仅用于向用户显示列表）：

所有这些代码在Chrome、Firefox甚至IE11中都运行良好，给了我类似的东西（前一个

v

表示插入符号向下，因为

showLittleObjectsList=true；

）：

不幸的是，在IE8中，最内层的

ng repeat

坚持使用第一个

littleObject

的元数据，给了我这样的东西：

v NAME1
________________________________________
|   Metadata desc:                      |
|   metadataA                           |
|   metadataF                           |
|   metadataZ                           |
|   metadataL                           |
|_______________________________________|

v NAME2
________________________________________
|   Metadata desc:                      |
|   metadataA                           |
|   metadataF                           |
|   metadataZ                           |
|   metadataL                           |
|_______________________________________|

v NAME3
________________________________________
|   Metadata desc:                      |
|   metadataA                           |
|   metadataF                           |
|   metadataZ                           |
|   metadataL                           |
|_______________________________________|

v NAME4
________________________________________
|   Metadata desc:                      |
|   metadataA                           |
|   metadataF                           |
|   metadataZ                           |
|   metadataL                           |
|_______________________________________|

如何在IE8中实现此功能？

---

小编辑

为了解决这个问题，我尝试不对

singledata/template.html

使用

ng include

，而是在主html中残酷地包含了该部分，现在看起来像这样：

<div ng-repeat="littleObject in bigObject.objects | orderBy:'name':false">
    <div>
        <button type="button" class="btn btn-default btn-sm" ng-click="showLittleObjectsList = !showLittleObjectsList">
            <span class="glyphicon glyphicon-chevron-right" ng-hide="showLittleObjectsList"></span>
            <span class="glyphicon glyphicon-chevron-down" ng-show="showLittleObjectsList"></span>
        </button>
        <span>{{littleObject.name}}</span>
    </div>
    <div ng-show="showLittleObjectsList">
        <div>
            <div ng-repeat="(key, metadata) in littleObject.metadata | groupBy:'index'">
                <div ng-show="$first">
                    <strong>
                        Metadatum desc
                    </strong>
                </div>
                <div ng-repeat="metadatum in metadata">
                    <div>
                        {{metadatum.desc}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{littleObject.name}

元基准描述

{{metadatum.desc}}

不幸的是，这并不能解决问题

---

编辑

---

目标的一个重要部分是显示列表及其

元数据

按

索引

分组。我添加了一个完整的控制器代码，并最终修改了分组的

元数据

索引，使其更有意义。

我不确定，但在我以前的一个项目中遇到了类似的问题，其中“跟踪方式”重复修复了问题。请通过添加来检查

(key, metadata) in littleObject.metadata | groupBy:'index' track by $index

---

希望这能解决您的问题。

我在我的电脑上看到了类似的情况，我对数据进行了分组，然后在该组上使用ng repeat。遗憾的是，我找到的唯一解决方案是创建自己的函数，该函数返回一个扁平列表

问题是（我认为）ie-8的功能不足以保持重复的范围和超时，通过使用一个函数，它将只执行一次计算，从而降低所需的原始处理能力

为了提供帮助，这里是我创建的分组函数，我对其进行了修改，使其能够处理上面的数据，只需调用该函数，然后对组执行重复操作即可

         $scope.generateGroups = function(littleObject) {
            $scope.groups = [];
            var options = [];
            littleObject.metadata.forEach(function (item, index) {
                    var groupIndex = $.inArray(item['index'], options);
                    if (groupIndex >= 0) {
                        $scope.groups[groupIndex].push(item);
                    } else {
                        options.push(item['index']);
                        var test =  [item];
                        $scope.groups.push(test);
                    }
            });
            $scope.apply();
        }

---

我不认为你需要支持IE8，很多角度特性在IE8中不起作用，让你的生活更艰难取决于你：）显然我必须使用IE8（：事实上，现在仍然有客户不愿意升级他们的SO，因为原因，所以最终取决于他们是否意识到你说的话；在那之前，经验法则一直是一样的：有钱的客户是你真正的老板，你必须使你的产品适合他的系统才能得到他的钱使用ng-click

ng-click=“！showLittleObjectsList”是一种奇怪的方式

Thank@YOU，实际上我不得不对其进行一些修改以使其正常工作；虽然有时我对细节的懒惰是压倒性的。但不幸的是，这似乎对我不起作用；我尝试了您的解决方案，然后我尝试在

ng repeat=“metadata in metadata”中使用
track by$index

，最终我尝试使用这两种方法，但效果不是很好，问题不断出现。感谢您为编写分组函数所做的努力；我将尽快尝试您的解决方案。

<div ng-repeat="littleObject in bigObject.objects | orderBy:'name':false">
    <div>
        <button type="button" class="btn btn-default btn-sm" ng-click="showLittleObjectsList = !showLittleObjectsList">
            <span class="glyphicon glyphicon-chevron-right" ng-hide="showLittleObjectsList"></span>
            <span class="glyphicon glyphicon-chevron-down" ng-show="showLittleObjectsList"></span>
        </button>
        <span>{{littleObject.name}}</span>
    </div>
    <div ng-show="showLittleObjectsList">
        <div>
            <div ng-repeat="(key, metadata) in littleObject.metadata | groupBy:'index'">
                <div ng-show="$first">
                    <strong>
                        Metadatum desc
                    </strong>
                </div>
                <div ng-repeat="metadatum in metadata">
                    <div>
                        {{metadatum.desc}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

(key, metadata) in littleObject.metadata | groupBy:'index' track by $index

         $scope.generateGroups = function(littleObject) {
            $scope.groups = [];
            var options = [];
            littleObject.metadata.forEach(function (item, index) {
                    var groupIndex = $.inArray(item['index'], options);
                    if (groupIndex >= 0) {
                        $scope.groups[groupIndex].push(item);
                    } else {
                        options.push(item['index']);
                        var test =  [item];
                        $scope.groups.push(test);
                    }
            });
            $scope.apply();
        }