get selected checkbox values from tree in angularjs

Question

I would like to know how can we get the selected checkbox values from tree in controller from the below example? On click of a button i want to display all the checkbox names in an array. Here is my plnkr- https://plnkr.co/edit/OSpLLl9YrlzqhM7xsYEv?p=preview //code goes here,

    //Controller
    Controller to display the tree.
    (function (ng) {
        var app = ng.module('tree', ['tree.service', 'tree.directives']);
        app.controller("TreeController", ["TreeService", function (TreeService) {
            var tc = this;
            buildTree();
            function buildTree() {
                TreeService.getTree().then(function (result) {
                    tc.tree = result.data;
                }, function (result) {
                    alert("Tree no available, Error: " + result);
                });
            }
        }]);
    })(angular);




    //Tree Directive
Directive used for creating tree node.
(function (ng) {
    var app = ng.module('tree.directives', []);
    app.directive('nodeTree', function () {
        return {
            template: '<node ng-repeat="node in tree"></node>',
            replace: true,
            restrict: 'E',
            scope: {
                tree: '=children'
            }
        };
    });
    app.directive('node', function ($compile) {
        return {
            restrict: 'E',
            replace: true,
            templateUrl: 'node.html', // HTML for a single node.
            link: function (scope, element) {
                /*
                 * Here we are checking that if current node has children then compiling/rendering children.
                 * */
                if (scope.node && scope.node.children && scope.node.children.length > 0) {
                    scope.node.childrenVisibility = true;
                    var childNode = $compile('<ul class="tree" ng-if="!node.childrenVisibility"><node-tree children="node.children"></node-tree></ul>')(scope);
                    element.append(childNode);
                } else {
                    scope.node.childrenVisibility = false;
                }
            },
            controller: ["$scope", function ($scope) {
                // This function is for just toggle the visibility of children
                $scope.toggleVisibility = function (node) {
                    if (node.children) {
                        node.childrenVisibility = !node.childrenVisibility;
                    }
                };
                // Here We are marking check/un-check all the nodes.
                $scope.checkNode = function (node) {
                    node.checked = !node.checked;
                    function checkChildren(c) {
                        angular.forEach(c.children, function (c) {
                            c.checked = node.checked;
                            checkChildren(c);
                        });
                    }

                    checkChildren(node);
                };
            }]
        };
    });
})(angular);

Answer 1

Hello: Look at this plunker link. It works here

https://plnkr.co/edit/vaoCzUJZBf31wtLNJ5f5?p=preview

(function (ng) {
var app = ng.module('tree', ['tree.service', 'tree.directives']);
app.controller("TreeController", ["TreeService", "$scope", function (TreeService, $scope) {
    var tc = this;
    buildTree();
    function buildTree() {
        TreeService.getTree().then(function (result) {
            tc.tree = result.data;
        }, function (result) {
            alert("Tree no available, Error: " + result);
        });
    }


   $scope.selectedItems = [];

   $scope.getSelected = function(){
     $scope.selectedItems = [];
     function checkChildren(c) {
          angular.forEach(c.children, function (c) {
             if (c.checked){
                $scope.selectedItems.push({"selected":c.name});
             }
              checkChildren(c);
          });
     }


      angular.forEach(tc.tree, function(value, key) {
          if (value.checked){
            $scope.selectedItems.push({"selected":value.name});
          }

           checkChildren(value);
      });
   };
}]);})(angular);