Treeview with checkbox and Angularjs?

Asked

Viewed 880 times

1

Someone has some example code, of a treeview with checkbox, done in html, angular and json?

Observing: I looked at several examples around, but I couldn’t make any of the examples work.

html angularjs treeview

  • Have you seen this? https://angular-ui-tree.github.io/angular-ui-tree/#/basic-example

  • Virgilio, in the examples there is no checkbox

  • The right one, if you saw one with checkbox who couldn’t understand?

  • 1

    I saw this one: http://jsfiddle.net/65yucqge/ , I couldn’t get it to expand and shrink

  • i made an example with a package of a look

1 answer

1


Using the library Angular IVH Treeview 

var app = angular.module('app', ['ivh.treeview']);
app.config(function(ivhTreeviewOptionsProvider) {
  ivhTreeviewOptionsProvider.set({
    twistieCollapsedTpl: '<span class="glyphicon glyphicon-chevron-right"></span>',
    twistieExpandedTpl: '<span class="glyphicon glyphicon-chevron-down"></span>',
    twistieLeafTpl: '&#9679;'
  });
});
app.controller('ctrl', function($scope) {
  $scope.items = [{
    label: 'Suitcase 1',
    value: '1',
    children: [{
      label: 'Top Hat 1',
      value: 'top_hat1'
    }, {
      label: 'Curly Mustache 1',
      value: 'mustachio1'
    }]
  }, {
    label: 'Suitcase 2',
    value: '2',
    children: [{
      label: 'Top Hat 2',
      value: 'top_hat2'
    }, {
      label: 'Curly Mustache 2',
      value: 'mustachio2'
    }]
  }];
});
/* with e.g. keyframe animations */
.ivh-treeview-node.ng-enter {
  animation: my-enter-animation 0.5s linear;
}

.ivh-treeview-node.ng-leave {
  animation: my-leave-animation 0.5s linear;
}

/* or class based animations */
.ivh-treeview-node.ng-hide {
  transition: 0.5s linear all;
  opacity: 0;
}

/* alternatively, just strike-through filtered out nodes */
.ivh-treeview-node.ng-hide {
  display: block !important;
}

.ivh-treeview-node.ng-hide .ivh-treeview-node-label {
  color: red;
  text-decoration: line-through;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//rawgit.com/iVantage/angular-ivh-treeview/master/dist/ivh-treeview.css" rel="stylesheet">
<link href="//rawgit.com/iVantage/angular-ivh-treeview/master/dist/ivh-treeview-theme-basic.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//rawgit.com/iVantage/angular-ivh-treeview/master/dist/ivh-treeview.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div ivh-treeview="items" 
  ivh-treeview-use-checkboxes="true">
  </div>
</div>

within this model there is a variable $scope.items which has a format requested by the library, so it is in this variable that the .

References:

Browser other questions tagged html angularjs treeview

You are not signed in. Login or sign up in order to post.