javascript - 如何在不迭代数组的情况下从 $scope 中删除对象？

Question

所以，我有jsfiddle here .

我们可以添加新节点并删除父节点中的所有子节点。但是如何在不迭代数组的情况下删除特定的子项呢？我知道我们可以使用:

Array.prototype.splice()

例如，如果我们想删除这个对象(屏幕截图#1)，我们可以获取它的索引并使用 splice()。

但是如果我想删除深层嵌套的对象，出于性能考虑，我不想迭代数组并使用 splice() 。

在我的控制台中我只得到:

Object { name: "Node-8-6-2", menu: false, $$hashKey: "object:151" }

而且我无权访问父数组的节点。我需要迭代所有数组，以便我可以删除它。

有人知道这个问题的解决方案吗？

Answer 1

这是您的 plunker 更新。 http://jsfiddle.net/marduke182/uXbn6/2828/

小的变化是:

使用parentNodes 添加对对象的父引用。

 $scope.add = function(data) {
        var post = data.nodes.length + 1;
        var newName = data.name + '-' + post;
        data.nodes.push({name: newName,nodes: [], parentNodes: data.nodes});
    };

创建方法删除节点并传递$index，在给定索引属性的情况下拼接到父节点:

   $scope.delete_node = function(data, index) {
        data.parentNodes.splice(index, 1);
    };

将新方法添加到模板中:

<script type="text/ng-template"  id="tree_item_renderer.html">
    {{data.name}}
    <button ng-click="add(data)">Add node</button>
    <button ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete nodes</button>
    <button ng-click="delete_node(data, $index)" >Delete node {{$index}}</button>
    <ul>
        <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
    </ul>
</script>