angularjs - Angular UI Tree collapse / remove -
simple question on getting started angular ui tree. using demo code form github account when copy code controller , html collapse , remove functions don't work. looks sets circular call toggle? tree shows fine in html data displayed toggle / collapse doesn't anything.
<script type="text/ng-template" id="items_renderer.html"> <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> <ol ui-tree-nodes="options" ng-model="item.items" ng-class="{hidden: collapsed}"> <li ng-repeat="item in item.items" ui-tree-node ng-include="'items_renderer.html'"> </li> </ol>
and on controller:
$scope.selecteditem = {}; $scope.options = { }; $scope.remove = function (scope) { scope.remove(); }; $scope.toggle = function (scope) { scope.toggle(); }; $scope.newsubitem = function (scope) { var nodedata = scope.$modelvalue; nodedata.items.push({ id: nodedata.id * 10 + nodedata.items.length, title: nodedata.title + '.' + (nodedata.items.length + 1), items: [] }); }; $scope.list = [ { "id": 1, "title": "1. dragon-breath", "items": [ { "id": 10, "title": "1. dragon-breath.1", "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": [] } ];
it appears name of function problem - change following , should work:
$scope.removenode = function (scope) { scope.remove(); };
i assume same may true other functions haven't tested these.
Comments
Post a Comment