Question

我有一个像这样的模型：

{
    "items": [
        {
            "type": "A",
            "id": "2",
            "number": 0,
            "info": "info1",
            "childs": [
                {
                    "type": "B",
                    "id": "21",
                    "number": 0,
                    "info": "info1",
                    "childs": []
                }
            ]
        },
        {
            "type": "A",
            "id": "1",
            "number": 0,
            "info": "info1",
            "childs": []
        },
        {
            "type": "A",
            "id": "2",
            "number": 0,
            "childs": [
                {
                    "type": "B",
                    "id": "21",
                    "number": 0,
                    "info": "info1",
                    "childs": [
                        {
                            "type": "C",
                            "id": "211",
                            "number": 0,
                            "info": "info1",
                            "childs": [
                                {
                                    "type": "B",
                                    "id": "2111",
                                    "info": "info1",
                                    "number": 0
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

通过4个嵌套ng-repeat在页面中呈现。属性number通过input="number"更改，每行一个。信息值由selectbox更改结构是这样的。

<div ng-repeat="item in items">

    <input type="number" ng-model="item.number" />
    <select ng-model="item.info">
    </select>

    <div ng-repeat="child in items.child">

        <input type="number" ng-model="child.number" />
        <select ng-model="child.info">
        </select>

        <div ng-repeat="child2 in child.child">

            <input type="number" ng-model="child2.number" />
            <select ng-model="child2.info">
            </select>

            <div ng-repeat="child3 in child2.child">

                <input type="number" ng-model="child3.number" />
                <select ng-model="child3.info">
                </select>
            </div>
        </div>
    </div>
</div>

嗯，实际的网络应用程序并不完全如此，但对您来说已经足够了。无论如何，如果我更改input="number"的值，渲染过程需要1500毫秒才能完成。当我更改selectbox所选选项时，会发生相同的情况（但渲染速度会快一点）。当我更改值时，我只需要更新模型中项目的属性。为什么棱角再次渲染？我能做什么？请记住，通常模型包含大约10/15项，每项5到20个孩子。

PS：奇怪的是，当我更改输入值时点击微调器（我使用Chrome时出现的默认值），数字会递增或递减2，而不是1。

编辑：仍然没有解决这个问题。当我在屏幕上显示太多项目时，所有渲染过程都太慢了，只有四个嵌套的ng-repeat。任何人都有一个替代解决方案，用于在页面中显示我的模型并修改值而不会在渲染时丢失2s？我无法使用分页或无限滚动。

AngularJS渲染需要花费大量时间

0 个答案: