0

I want to hide only root node in angular ui treeview. All child node hide with root node. I have tried everything. Looked up on the internet but haven't find a specific solution for this problem.

    <!-- Nested node template -->
    <script type="text/ng-template" id="nodes_renderer.html">
      <div>
        <div ui-tree-handle class="tree-node tree-node-content">
          <a class="btn btn-success btn-xs"  ng-if="node.nodes && node.nodes.length > 0" data-nodrag ng-click="toggle(this)"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a>              
            {{node.title}}
          <a class="pull-right btn btn-danger btn-xs"  ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a>
          <a class="pull-right btn btn-primary btn-xs"  ng-click="newSubItem(this)" style="margin-right: 8px;"><span class="glyphicon glyphicon-plus"></span></a>
        </div>
        <div>
          <ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}">
            <li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer.html'" ng-hide="data[0].id==1">
            </li>
          </ol>
        </div>
      </div>
    </script>

    <div ui-tree id="tree-root">
      <ol ui-tree-nodes="" ng-model="data">
        <li ng-repeat="node in data" ui-tree-node ng-include="'nodes_renderer.html'"  ng-hide="data[0].id== 1 "></li>
      </ol>
    </div>
  </div>
</div>

my Tree:

 $scope.data = [{
            "id": 1,
            "title": "node1",
            "nodes": [{
                "id": 2,
                "title": "node1.1",
                "nodes": [{
                    "id": 3,
                    "title": "node1.1.1",
                    "nodes": [{
                        "id": 4,
                        "title": "node1.1.1",
                        "nodes": [{"id": 5,
                            "title": "node1.1.1",
                            "nodes": [{"id": 6,
                                "title": "node1.1.1",
                                "nodes": []},{
                "id": 7,
                "title": "node1.2",
                "nodes": [{
                    "id": 8,
                    "title": "node1.2.1",
                    "nodes": []
                }, {
                    "id": 9,
                    "title": "node1.2.2",
                    "nodes": []
                },{
                "id": 10,
                "title": "node1.2",
                "nodes": [{
                    "id": 11,
                    "title": "node1.2.1",
                    "nodes": []
                }, {
                    "id": 12,
                    "title": "node1.2.2",
                    "nodes": []
                }],
            }],
            }]}]
                    }]
                }]
            }, {
                "id": 13,
                "title": "node1.2",
                "nodes": [{
                    "id": 14,
                    "title": "node1.2.1",
                    "nodes": []
                }, {
                    "id": 15,
                    "title": "node1.2.2",
                    "nodes": []
                }],
            }, {
                "id": 16,
                "title": "node1.2",
                "nodes": [{
                    "id": 17,
                    "title": "node1.2.1",
                    "nodes": []
                }, {
                    "id": 18,
                    "title": "node1.2.2",
                    "nodes": []
                }],
            },
            {
                "id": 19,
                "title": "node1.3",
                "nodes": [{
                    "id": 20,
                    "title": "node1.3.1",
                    "nodes": []
                }],
            }, {
                "id": 21,
                "title": "node1.4",
                "nodes": [{
                    "id": 22,
                    "title": "node1.4.1",
                    "nodes": []
                }],
            }],
        }];
    });

1 Answer 1

1
  <div class="tree-node" ng-class="node.id == 1 ? 'hide' : '' ">
    <div ui-tree-handle class="tree-node tree-node-content">
       <a class="btn btn-success btn-xs"  ng-if="node.nodes && node.nodes.length > 0" data-nodrag ng-click="toggle(this)"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a>             
          {{node.title}}
       <a class="pull-right btn btn-danger btn-xs"  ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a>
       <a class="pull-right btn btn-primary btn-xs"  ng-click="newSubItem(this)" style="margin-right: 8px;"><span class="glyphicon glyphicon-plus"></span></a>
     </div>
   <div>
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.