CODEWITHSUNDEEP
angularjs
user5225820
user5225820

Reputation:

To hide root node in angular ui treeview

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

Upvotes: 0

Views: 1952

Answers (1)

user5225820
user5225820

Reputation: 

  <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>

Upvotes: 1

Related Questions