嵌套的 ng-repeat 在 IE8 中不起作用

Question

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

特别是嵌套 ng-repeats 用于显示在以下 MainController:

中声明的 bigObject 有问题

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; 只是用来向用户显示列表）：

<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-include="'path/to/singledata/template.html'"></div>
        </div>
    </div>
</div>

单个数据的template.html是这样的（groupBy过滤器属于angular-filter）：

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

所有这些代码在 Chrome、Firefox 甚至 IE11 中都运行良好，给我这样的东西（前 v 用于插入符号，因为 showLittleObjectsList = true;）：

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

v NAME2
________________________________________
|   Metadata desc:                      |
|   metadataH                           |
|   metadataX                           |
|_______________________________________|

v NAME3
________________________________________
|   Metadata desc:                      |
|   metadataU                           |
|   metadataG                           |
|   metadataS                           |
|_______________________________________|

v NAME4
________________________________________
|   Metadata desc:                      |
|   metadataK                           |
|   metadataR                           |
|   metadataW                           |
|   metadataN                           |
|   metadataC                           |
|_______________________________________|

可悲的是，在 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                           |
|_______________________________________|

How can I get this working in IE8?

small EDIT

为了解决这个问题，我尝试不使用 ng-include 作为 singledata/template.html，而是粗暴地将那个部分包含在主 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>

很遗憾，这不能解决问题。

EDIT

目标的一个重要部分是显示 metadata 按 index 分组的列表。我添加了一个完整的控制器代码，最后我修改了 metadata 索引以使分组更有意义。

Answer 1

我不确定，但在我之前的一个项目中遇到过类似的问题，其中 'track by' 在 ng-repeat 中修复了问题。请通过添加

检查

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

希望这能解决您的问题。

Answer 2

我在我的机器上看到了非常相似的事情，我在那里对数据进行分组，然后对该组使用 ng-repeat。遗憾的是，我找到的唯一解决方案是制作自己的函数，returns 一个扁平化的列表。

问题（我认为）是 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();
        }

嵌套的 ng-repeat 在 IE8 中不起作用

Nested ng-repeat doesn't work in IE8

html

loops

internet-explorer-8

angularjs

angularjs-ng-repeat