I have a single page application in AngularJS 1.2.28 and I'm struggling getting it work properly in IE8.
我在AngularJS 1.2.28中有一个单页面应用程序，我正在努力让它在IE8中正常工作。
In particular I have a problem with nested ng-repeats used to display the bigObject declared within the following MainController:
特别是我有一个嵌套的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"}
]
}
]
};
}]);
The main HTML chunk is something like this (notice that showLittleObjectsList = false; in the controller at the beginning and is used just to display the lists to the user):
主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>
The template.html of the single data is something like this (the groupBy filter belongs to angular-filter):
单个数据的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>
All this code is working well in Chrome, Firefox and even IE11, giving me something like this (the former v is for caret down, because showLittleObjectsList = true;):
所有这些代码在Chrome，Firefox甚至IE11中运行良好，给我这样的东西（前者用于插入符号，因为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 |
|_______________________________________|
Sadly in IE8 the innermost ng-repeat is sticking with the first littleObject's metadata, giving me something like this:
遗憾的是在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?
我怎样才能在IE8中使用它？
small EDIT
小编辑
Struggling with this problem, I tried not to use ng-include for the singledata/template.html, instead I brutally included that partial in the main HTML which looks like this now:
在这个问题上苦苦挣扎，我尝试不使用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>
Unfortunately this doesn't resolve the issue.
不幸的是，这并没有解决问题。
EDIT
编辑
An important part of the goal is to show the lists with their metadata grouped by index. I added a full controller code, and eventually I modified the metadata indexes for the grouping to make more sense.
该目标的一个重要部分是显示列表及其按索引分组的元数据。我添加了一个完整的控制器代码，最终我修改了分组的元数据索引，使其更有意义。
2 个解决方案
#1
7
I have seen something very similar occurring on mine, where I was grouping data, then using ng-repeat over that group. Sadly the only solution I found was to make my own function which returns a flattened list.
我已经看到了一些非常相似的东西，我在那里分组数据，然后在该组上使用ng-repeat。可悲的是，我找到的唯一解决方案是创建自己的函数，返回一个扁平列表。
The issue (i think) is that ie-8 just isn't powerful enough to keep the repeat in scope and times out, by using a function it will only perform the calculation once and thus reduce the raw processing power needed.
问题（我认为）是因为ie-8不足以保持重复范围和超时，通过使用一个函数它只会执行一次计算，从而降低所需的原始处理能力。
Just to help, here is the grouping function I created, I have modified it so it should work with your data above, simply call the function, and do the repeat over groups instead.
只是为了帮助，这里是我创建的分组功能，我已经对它进行了修改，因此它应该可以处理上面的数据，只需调用函数，然后重复组。
$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();
}
#2
2
Im not sure exactly but faced similar type of problem in one of my previous project where 'track by' in ng-repeat fixed issue. Please check by adding
我不确定但在我之前的一个项目中遇到类似类型的问题，其中“跟踪”在ng-repeat修复问题中。请加入检查
(key, metadata) in littleObject.metadata | groupBy:'index' track by $index
Hope this will fix your issue.
希望这能解决您的问题。
#1
7
I have seen something very similar occurring on mine, where I was grouping data, then using ng-repeat over that group. Sadly the only solution I found was to make my own function which returns a flattened list.
我已经看到了一些非常相似的东西，我在那里分组数据，然后在该组上使用ng-repeat。可悲的是，我找到的唯一解决方案是创建自己的函数，返回一个扁平列表。
The issue (i think) is that ie-8 just isn't powerful enough to keep the repeat in scope and times out, by using a function it will only perform the calculation once and thus reduce the raw processing power needed.
问题（我认为）是因为ie-8不足以保持重复范围和超时，通过使用一个函数它只会执行一次计算，从而降低所需的原始处理能力。
Just to help, here is the grouping function I created, I have modified it so it should work with your data above, simply call the function, and do the repeat over groups instead.
只是为了帮助，这里是我创建的分组功能，我已经对它进行了修改，因此它应该可以处理上面的数据，只需调用函数，然后重复组。
$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();
}
#2
2
Im not sure exactly but faced similar type of problem in one of my previous project where 'track by' in ng-repeat fixed issue. Please check by adding
我不确定但在我之前的一个项目中遇到类似类型的问题，其中“跟踪”在ng-repeat修复问题中。请加入检查
(key, metadata) in littleObject.metadata | groupBy:'index' track by $index
Hope this will fix your issue.
希望这能解决您的问题。