我在AngularJS 1.2.28中有一个单页应用程序,我很难在IE8中正常运行。
特别是我遇到嵌套ng-repeat
的问题,用于显示以下bigObject
中声明的MainController
:
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 |
|_______________________________________|
如何在IE8中使用它?
小编辑
在遇到这个问题时,我尽量不使用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>
不幸的是,这并没有解决问题。
修改
目标的一个重要部分是显示列表,其metadata
按index
分组。我添加了一个完整的控制器代码,最后我为分组修改了metadata
索引以使其更有意义。
答案 0 :(得分:7)
我已经看到了一些非常相似的事情,我在那里分组数据,然后在该组上使用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();
}
答案 1 :(得分:2)
我不确定但是在我之前的一个项目中遇到了类似的问题,其中&#39;跟踪&#39;在ng-repeat修正问题。请通过添加
进行检查(key, metadata) in littleObject.metadata | groupBy:'index' track by $index
希望这能解决您的问题。