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.
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.
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: '●'
});
});
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 .