1

1好的，所以我正在开发一个具有父子层次结构的应用程序，它使用 AngularJs 将从 RESTFUL Web 服务接收到的数据绑定到视图。

Web 服务将返回的 JSON 示例如下：

{"id":0,"name":"Parent One","listOfChildren":[{"id":0,"name":"Child 1","childType":"CHILD1"},{"id":1,"name":"Child 2","childType":"CHILD1"}]}

有了这些信息，我知道我可以将它放入一个数组中并使用 Angulars ng-repeat 将其显示在表格上，但我的问题是父母可能有成百上千的孩子，并且可能有成百上千的父母，所以阵列会是巨大的.

另一个问题是，当我用新的孩子更新父母时，我必须遍历整个数组来寻找父母，然后将孩子插入其中，这是非常低效的。

所以我的问题基本上是有什么办法可以更有效地做到这一点而不必使用一个大数组？

感谢您提供的任何帮助。

4

1 回答 1

3

鉴于您拥有大量数据，我不知道是否真的有完美的解决方案。您必须一次向每位父母和每位孩子展示吗？或者您可以对结果进行分页，以便一次只显示 100 个节点？在您的示例中，父级和两个子级都具有相同的 id 属性值 0。实际上是这样吗？或者你的父母和孩子有唯一的身份证？您是否有权访问后端 Web 服务？你能改变它提供的 json 的格式吗？

对上述问题做出一些假设，这是我能想到的最好的建议：

将您的 JSON 更改为与此类似的格式：

var bigobject = {
    100: {
        "id":100,
        "name":"Parent One",
        "listOfChildren":{
            101: {
                "id":101,
                "name":"Child 1",
                "childType":"CHILD1"
            },
            102: {
                "id":102,
                "name":"Child 2",
                "childType":"CHILD1"
            }
            ...  // more children here
        }
    },
    103: {
        "id":103,
        "name":"Parent Two",
        "listOfChildren":{
            104: {
                "id":104,
                "name":"Child 3",
                "childType":"CHILD1"
            },
            105: {
                "id":105,
                "name":"Child 4",
                "childType":"CHILD1"
            }
            ...  // more children here
        }
    },
    ...  // more parents here
}

基本上你有一个大的 json 对象，其中每个节点的键是它节点的id. 然后，您将父listOfChildren项从数组更改为一个对象，该对象具有其子项的所有 id 的键。

向您的父母添加一个新孩子很简单。例如：

var parentId = 103;
var newChild = {"id":110,"name":"Child 2","childType":"CHILD1"};
bigobject[parentId].listOfChildren[newChild.id] = newChild;

然后对结果进行分页，您可以使用内置limitTo过滤器和自定义过滤器startFrom：

.filter('startFrom', function() {
    return function(input, start) {
        if(!input) return input;
        start = +start;
        return input.slice(start);
    };
});

然后你ng-repeat会是这样的：

<div ng-repeat="(parentId, parent) in bigobject | startFrom:start | limitTo:pageSize">
    <div ng-repeat="(childId, child) in bigobject[parentId].listOfChildren">
        {{parent.name}} - {{child.name}}
    </div>
</div>

我希望这对您有所帮助或至少为您指明了一个有用的方向。

于 2013-11-14T14:48:48.700 回答