TreeView with checkbox and AngularJS?

1

Does anyone have any example code, treeview with checkbox , done in html, angular and json ?

Note: I looked at several examples around, but I could not make any of the examples work.

    
asked by anonymous 07.08.2017 / 23:43

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><linkhref="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><scriptsrc="//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><divng-app="app" ng-controller="ctrl">
  <div ivh-treeview="items" 
  ivh-treeview-use-checkboxes="true">
  </div>
</div>

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

08.08.2017 / 03:03