Angular UI Tree折叠/删除 [英] Angular UI Tree collapse / remove

问题描述

关于Angular UI Tree入门的简单问题.我从他们的github帐户使用他们的演示代码，但是当我将该代码复制到我的控制器和html中时，折叠和删除功能不起作用.看起来它只是设置了一个循环调用以进行切换?这棵树在我的html中显示的很好，并显示了数据，但切换/折叠没有任何作用.

Simple question on getting started with Angular UI Tree. I am using their demo code form their github account but when I copy that code into my controller and html the collapse and remove functions don't work. It looks like it just sets up a circular call to toggle? The tree shows up fine in my html with the data displayed but the toggle / collapse doesn't do anything.

<script type="text/ng-template" id="items_renderer.html">

<div ui-tree-handle>
    <a class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this)"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a>
    {{item.title}}
    <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a>
    <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><span class="glyphicon glyphicon-plus"></span></a>
</div>

<ol ui-tree-nodes="options" ng-model="item.items" ng-class="{hidden: collapsed}">
    <li ng-repeat="item in item.items" ui-tree-node ng-include="'items_renderer.html'">
    </li>
</ol>

并在控制器上:

    $scope.selectedItem = {};

$scope.options = {
};

$scope.remove = function (scope) {         
    scope.remove();
};

$scope.toggle = function (scope) {          
    scope.toggle();
};

$scope.newSubItem = function (scope) {
    var nodeData = scope.$modelValue;
    nodeData.items.push({
        id: nodeData.id * 10 + nodeData.items.length,
        title: nodeData.title + '.' + (nodeData.items.length + 1),
        items: []
    });
};

$scope.list = [
{
    "id": 1,
    "title": "1. dragon-breath",
    "items": [
      {
          "id": 10,
          "title": "1. dragon-breath.1",
          "items": []
      }
    ]
    },
    {
        "id": 2,
        "title": "2. moiré-vision",
        "items": [
          {
              "id": 21,
              "title": "2.1. tofu-animation",
              "items": [
                {
                    "id": 211,
                    "title": "2.1.1. spooky-giraffe",
                    "items": []
                },
                {
                    "id": 212,
                    "title": "2.1.2. bubble-burst",
                    "items": []
                }
              ]
          },
          {
              "id": 22,
              "title": "2.2. barehand-atomsplitting",
              "items": []
          }
        ]
    },
    {
        "id": 3,
        "title": "3. unicorn-zapper",
        "items": []
    },
    {
        "id": 4,
        "title": "4. romantic-transclusion",
        "items": []
    }
];

推荐答案

该函数的名称似乎有问题-更改为以下内容，它应该可以工作:

It appears the name of the function is the problem - change to the following and it should work:

$scope.removeNode = function (scope) {         
    scope.remove();
};

我认为其他功能也可能如此，但我尚未测试这些功能.

I assume the same may be true for the other functions but I haven't tested these.

这篇关于Angular UI Tree折叠/删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！