Question

我有一段AngularJs代码，它以分层方式添加一组元素。它还会删除相应按钮点击的组元素。

我遇到的问题是，如果节点没有任何子节点，我无法删除/删除节点。

在删除功能中，我试图清空节点，但节点没有被删除。

Script.js：

var myapp = angular.module('myApp', [])
      .controller('nestedController', function($scope){            
             $scope.delete = function(data) {

                 if(data.nodes.length  == 0)
                 {
                  data = {};
                 }
               // Removes all the children nodes. 
               data.nodes = [];
            };    
...
});

html：

  <html ng-app="myApp" ng-controller="nestedController">

  <head>

      <script type="text/ng-template" id="my-tmpl">
  {{data.name}}
  ...
  <button class="btn" ng-click="delete(data)" >Delete nodes</button>

  <ul>
    <li ng-repeat="data in data.nodes" ng-include="'my-tmpl'"></li>
  </ul>
 </script>   
  </head>

  <body>
<ul >
  <li ng-repeat="data in tree" ng-include="'my-tmpl'"></li>
</ul>
</body>
</html>

功能齐全的代码位于Plunker

Answer 1

使用您的代码，您无法删除单个节点，因为您实现的删除功能仅删除节点的子元素而不删除父本身。如果只想删除单个子节点，则必须构建另一个函数，该函数接受输入节点本身并将其从tree数据结构中删除。如果实现这样的功能，还要考虑重复删除子节点。

从层次结构中删除动态添加的元素/模板（在AngularJs中）

1 个答案: