why css is not loaded while using nested list ..?

Question

I make a simple after studying from this link https://github.com/JimLiu/angular-ui-tree and demo is here http://jimliu.github.io/angular-ui-tree/ But it not show "+" ,"V" and "X" icon why ?

http://plnkr.co/edit/xur9RjMrhxEppNIewfo6?p=preview

<!DOCTYPE html>
<html ng-app="MyApp">

  <head>
    <link data-require="[email protected]" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
        <link data-require="[email protected]" data-semver="3.2.0" rel="stylesheet" href="https://dl.dropboxusercontent.com/s/jm6a2zekeh9kixj/angular-ui-tree.min.css" />

    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="[email protected]" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
     <script src="https://dl.dropboxusercontent.com/s/nxy1if8uz0ndudn/angular-ui-tree.js?m="></script>
  </head>

  <body>
  <div ng-controller="MainCtrl">
<div ui-tree >
  <ol ui-tree-nodes="" ng-model="list">
    <li ng-repeat="item in list" ui-tree-node>
      <div ui-tree-handle>
        {{item.title}}
      </div>
      <ol ui-tree-nodes="" ng-model="item.items">
        <li ng-repeat="subItem in item.items" ui-tree-node>
          <div ui-tree-handle>
            {{subItem.title}}
          </div>
        </li>
      </ol>
    </li>
  </ol>
</div>
</div>
</body>
<script>
  var myAppModule = angular.module('MyApp', ['ui.tree']);
 myAppModule.controller('MainCtrl', function($scope) {
     $scope.list = [{
      "id": 1,
      "title": "1. dragon-breath",
      "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": []
    }];
 })
</script>

</html>

where I am wrong ..? can you please tell me?

1. Include your script either in body tag or in head tag. 2. Those "icons" are taken from bootstrap, so you should add it to your plunker — Ilya Luzyanin, Aug 17 '14 at 13:33
ok wait checking..I already add that please check plunker..can you share your plunker so that I will check where I am wrong — Shruti, Aug 17 '14 at 13:34

gearsdigital · Answer 1 · 2014-08-17 14:32:05Z

up vote 0 down vote

You simply included wrong ui-tree-handle Templates.

Working Version: http://plnkr.co/edit/wiOWgql8jMN2NUKYmCGl?p=preview

Use this:

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

Instead of this:

<div ui-tree-handle>
    {{item.title}}
</div>

Same for your sub items.

answered Aug 17 '14 at 14:32

gearsdigital

6,53732560

thanks for answer ..but why it is not collapse or expand.using">" and "v" – Shruti Aug 17 '14 at 15:18

@gearsdisgitial when you see the it will collapses and expand when user click "<"","V" – Shruti Aug 17 '14 at 15:23

Buddy, you should not change other peoples code without to know what you're doing or if you're not able to copy and paste correctly ;) You need to include ng-class="{hidden: collapsed}". I've updated the plunker. Take a look at line 27 – gearsdigital Aug 17 '14 at 17:37

add a comment |

shweta purushe · Answer 2 · 2015-09-04 18:11:59Z

I just cleaned things up a bit from gearsdigital answer. Here is the updated plunkr Things that i changed were

Updated the source of the angular-ui-tree (the plunkr provided used a dropbox source)
Created a new item-renderer.html. This creates a list renderer for every item which cleans up and simplifies the code. This helps in unlimited nesting.

item_renderer.html

 <div ui-tree-handle class="tree-node tree-node-content">
    <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="" ng-model="item.items" ng-class="{hidden: collapsed}">
    <li ng-repeat="item in item.items" ui-tree-node ng-include="'item_renderer.html'">
    </li>
  </ol>

index.html

    <!DOCTYPE html>
<html ng-app="MyApp">

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <link data-require="[email protected]" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <link data-require="angular-ui-tree@*" data-semver="2.8.0" rel="stylesheet" href="https://cdn.rawgit.com/angular-ui-tree/angular-ui-tree/master/dist/angular-ui-tree.min.css" />
    <script data-require="angular-ui-tree@*" data-semver="2.8.0" src="https://cdn.rawgit.com/angular-ui-tree/angular-ui-tree/master/dist/angular-ui-tree.min.js"></script>
    <script data-require="[email protected]" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="MainCtrl">
        <!-- Nested node template -->
        <div class="row">
            <div class="col-sm-6">
                <div ui-tree id="tree-root">
                    <ol ui-tree-nodes ng-model="list">
                        <li ng-repeat="item in list" ui-tree-node ng-include="'item_renderer.html'"></li>
                    </ol>
                </div>
            </div>
      </div>
    </div>

  </body>

</html>

script.js

var myAppModule = angular.module('MyApp', ['ui.tree']);
 myAppModule.controller('MainCtrl', function($scope) {

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

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

        $scope.moveLastToTheBeginning = function () {
            var a = $scope.list.pop();
            $scope.list.splice(0, 0, a);
        };

        $scope.newSubItem = function (scope) {
            var nodeData = scope.$modelValue;
            console.log(nodeData);
            nodeData.items.push({
                id: nodeData.id * 10 + nodeData.items.length,
                title: nodeData.title + '.' + (nodeData.length + 1),
                items: []
            });
        };
     $scope.list = [{
      "id": 1,
      "title": "1. dragon-breath",
      "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": []
    }];
 })

asked	2 years ago
viewed	273 times
active	1 year ago

current community

your communities

more stack exchange communities

why css is not loaded while using nested list ..?

2 Answers 2

Your Answer

Not the answer you're looking for? Browse other questions tagged javascript jquery angularjs angularjs-directive or ask your own question.

Hot Network Questions

current community

your communities

more stack exchange communities

why css is not loaded while using nested list ..?

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascript jquery angularjs angularjs-directive or ask your own question.

Related

Hot Network Questions