具有Angular指令的TreeView

时间:2016-01-28 07:05:03

标签: javascript angularjs treeview

我对Angular比较新,所以请原谅我的错误,如果有的话。我必须修改并使用NgModules中的这个treeview指令。它的代码看起来很有前景,但我必须稍微修改它以添加添加/删除或修改项目的功能。

Plunker

我之前使用jQuery创建了我的树视图并完成了所有相关任务。但是既然我决定转向Angular,我就必须采用棱角分明的方式。

据我所知,这个指令使用嵌套的递归指令来创建树,这是一种有效的方法。它工作正常,但我会在我的树视图中显示3000-4000个项目。因此,当我使用此代码执行此操作时,由于许多监视表达式(每个项目5-7个),它会降低屏幕速度并消耗大量内存。

Plunker

我尝试使用:: notation在ng-repeat中进行一次绑定。这有很多帮助,但现在我无法实现我的添加或更新方法。有什么方法可以做到这一点吗?

<li data-ng-repeat="node in ::' + treeModel + '">

1 个答案:

答案 0 :(得分:1)

https://plnkr.co/edit/KwnvyslibWd1dmIXxBYU?p=preview

您已在范围内拥有所选节点,因此只需将新节点推入其子阵列即可。

$scope.AddNode = function(NewNode)
    {
        NewNode = {"roleName" : NewNode , "roleId" : "role11", "children" : []};
      $scope.mytree.currentNode.children.push(NewNode);
    };

编辑:顾名思义 - 它是一次性绑定,所以添加/删除不会在这里工作。我认为浏览器在尝试显示一次这样的数据时有点卡住是正常的。相反,您可以按位添加节点,比如20步。或者您也可以查看其他库。 This one使您可以选择显示最初折叠的节点数组。