javascript - ng-include 和 ng-repeat - 删除子项

Question

我可能只是在闲逛，但我在执行下面的一小段代码时遇到了麻烦。我有嵌套的 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 中吗？

Answer 1

Any idea how I could pass the parent into the ng-include along with the item?

我认为将父级传递给子级会导致代码复杂性和难以维护。我也相信当我们谈论大数据时它会影响性能。您不使用具有隔离范围的嵌套指令，因此我将使用其他方法根据唯一值 a.e. 从嵌套树中删除节点:

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);
    }

Demo 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": []
        }];
    }        
});