ng-include 和 ng-repeat - 删除子元素

Question

ng-include 和 ng-repeat - 删除子元素

3

也许我只是难以理解，但是我遇到了以下代码问题。我有嵌套的ng-repeats和ng-includes，并希望从任意层级中删除一个项目。所以...

<div ng-repeat="item in List" ng-include="'item.html'">
</div>

item.html

<div>
   <h1>{{ item.title }}</h1>
   <div ng-repeat="item in item.List" ng-include="'item.html'"></div>
   <button ng-click="removeItem(item)">Remove me!</button>
</div>

显然，如果我能够访问父级的List数组，我就可以根据索引将其截取出来，但我对如何访问该父对象感到非常模糊。有什么想法可以将父级与item一起传递到ng-include中吗？

- opticon

你能否提供一个在 Plunker/Fiddle 上演示你的问题的演示吗？ - Maxim Shoustin

你能否更详细地描述一下你的情境？像这样使用 ng-include 创建递归是相当不常见且普遍令人困惑的。$parent 可能满足你的需求，但可能会变得混乱；代码中出现 $parent.$parent.$parent 很快就会变得非常丑陋。 - Claies

没有太多东西需要充实。一个项目需要能够从其父List数组中移除自己，因此它不需要超过一级。我尝试了$parent，但它没有公开List数组，只有父控制器。有什么更好的递归方式可以做到这一点吗？ - opticon

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Maxim Shoustin · Answer 1

你有没有想过如何在ng-include中传递父级和项目？我认为将父级传递给子级会导致代码复杂化和难以维护。当我们谈论大数据时，我也相信它会影响性能。如果您不使用隔离作用域的嵌套指令，那么我会使用其他方法来基于唯一值从嵌套树中删除节点。

function removeFromTree(parent, childNameToRemove){
      console.log(parent);
           parent.nodes = parent.nodes.filter(function(child){ 
             return child.name !== childNameToRemove;
           }).map(function(child){ 
              return removeFromTree(child, childNameToRemove);
           });
    return parent;
   }


    $scope.removeItem = function(item){
       $scope.displayTree[0] = removeFromTree( $scope.displayTree[0], item.name);
    }

演示 plunker

完整代码

HTML

<div ng-controller="DialogDemoCtrl">
          <div class="span5 article-tree">
          <div ng-style="{'overflow': 'auto'}">

            <script type="text/ng-template"  id="tree_item_renderer">
              <span>
                 {{showNode(data)}} 
              </span>
             <button ng-click="removeItem(data)">Remove me!</button>
              <li ng-repeat="data in data.nodes" class="parent_li"  ng-include="'tree_item_renderer'" tree-node></li>
              </ul>
            </script>

            <div class="tree well">
          <ul>
            <li ng-repeat="data in displayTree"  ng-include="'tree_item_renderer'"></li>
          </ul>
        </div>
      </div>
    </div>
</div>

JS

angular.module('plunker', ['ui.bootstrap'])
.controller('DialogDemoCtrl', function ($scope, $http) {

     buildEmptyTree();   


    function removeFromTree(parent, childNameToRemove){
      console.log(parent);
           parent.nodes = parent.nodes.filter(function(child){ 
             return child.name !== childNameToRemove;
           }).map(function(child){ 
              return removeFromTree(child, childNameToRemove);
           });
    return parent;
   }


    $scope.removeItem = function(item){
       $scope.displayTree[0] = removeFromTree( $scope.displayTree[0], item.name);
    }        

 function buildEmptyTree() {

        $scope.displayTree =
            [{
            "name": "Root",
            "type_name": "Node",
            "show": true,
            "nodes": [{
                "name": "Loose",
                "group_name": "Node-1",
                "show": true,
                "nodes": [{
                    "name": "Node-1-1",
                    "device_name": "Node-1-1",
                    "show": true,
                    "nodes": []
                }, {
                    "name": "Node-1-2",
                    "device_name": "Node-1-2",
                    "show": true,
                    "nodes": []
                }, {
                    "name": "Node-1-3",
                    "device_name": "Node-1-3",
                    "show": true,
                    "nodes": []
                }]
            }, {
                "name": "God",
                "group_name": "Node-2",
                "show": true,
                "nodes": [{
                    "name": "Vadar",
                    "device_name": "Node-2-1",
                    "show": true,
                    "nodes": []
                }]
            }, {
                "name": "Borg",
                "group_name": "Node-3",
                "show": true,
                "nodes": []
            }, {
                "name": "Fess",
                "group_name": "Node-4",
                "show": true,
                "nodes": []
            }]
        }];
        [{
            "name": "Android",
            "type_name": "Android",
            "icon": "icon-android icon-3",
            "show": true,
            "nodes": []
        }];
    }        
});