Load dynamic abn tree data in AngularJs
HTML
|
1 2 3 4 5 6 7 8 9 |
<div class="panel-body" ng-controller="TreeCtrl"> <div ng-show="showLoader" style="text-align:center;"> <img src="assets/images/LoaderIcon.gif"> <!-- or any other spinner --> </div> <div class="box-tree"> <span ng-if="doing_async">...loading...</span> <abn-tree ng-if="isInit" tree-data="my_data" tree-control="my_tree" on-select="my_tree_handler(branch)" expand-level="2" initial-selection="Granny Smith" icon-leaf="ti-file" icon-expand="ti-plus" icon-collapse="ti-minus" ></abn-tree> </div> </div> |
AngularJs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
// baseURL is web service url that get data from database app.controller('TreeCtrl', ["$scope", "$timeout","$http","baseURL", function ($scope, $timeout,$http,baseURL) { var apple_selected, tree, treedata_avm, treedata_geography; $scope.my_tree_handler = function (branch) { var _ref; $scope.output = "You selected: " + branch.label; if ((_ref = branch.data) != null ? _ref.description : void 0) { return $scope.output += '(' + branch.data.description + ')'; } }; var loaddata = function(){ $http.post(baseURL, { action:'GetTreeData' }).then(function(response){ if(response.data.status == 1){ $scope.taxdata=response.data.data; }else if(response.data.status == 2){ SweetAlert.swal("Opps something went wrong.",response.data.msg, "error"); } },function errorCallback(response){ console.log(response); }); }; loaddata(); $scope.showLoader = true; $scope.isInit=false; setTimeout(function(){ $scope.showLoader = false; console.log($scope.taxdata); $scope.my_data = $scope.taxdata; $scope.isInit=true; $scope.$apply('isInit'); },2000); $scope.my_tree = tree = {}; $scope.try_async_load = function () { $scope.my_data = []; $scope.doing_async = true; return $timeout(function () { if (Math.random() < 0.5) { $scope.my_data = treedata_avm; } else { $scope.my_data = treedata_geography; } $scope.doing_async = false; return tree.expand_all(); }, 1000); }; return $scope.try_adding_a_branch = function () { var b; b = tree.get_selected_branch(); return tree.add_branch(b, { label: 'New Branch', data: { something: 42, "else": 43 } }); }; }]); |
Load dynamic abn tree data in AngularJs