Storing checked checkboxes into array in angularjs tree structure

Question

Currently i am able to display item that have parent child relation in tree structure using checkboxes. Now I need to store the checked checkboxes into one array so that I can submit that data to server via ajax.

I am new to angularjs. I tried printing using ng-model value. But it doesn't work.

Can you help me with how I can store the checked checkboxes into array.

Below is the code.

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script>
        var app, list;
        list = [
            {
                name: 'Developer',
                opened: true,
                children: [
                    {
                        name: 'Front-End',id:1,
                        children: [
                            {
                                name: 'Jack',id:2,
                                title: 'Leader'
                            },
                            {
                                name: 'John',id:3,
                                title: 'Senior F2E'
                            },
                            {
                                name: 'Jason',id:4,
                                title: 'Junior F2E'
                            }
                        ]
                    },
                    {
                        name: 'Back-End',id:5,
                        children: [
                            {
                                name: 'Mary',id:6,
                                title: 'Leader'
                            },
                            {
                                name: 'Gary',id:7,
                                title: 'Intern'
                            }
                        ]
                    }
                ]
            },
            {
                name: 'Design',id:8,
                children: [{
                    name: 'Freeman',id:9,
                    title: 'Designer'
                }]
            },
            {
                name: 'S&S',id:10,
                children: [{
                    name: 'Nikky',id:11,
                    title: 'Robot'
                }]
            }
        ];
        app = angular.module('testApp', []).controller('treeTable', [
            '$scope',
            '$filter',
            function ($scope, $filter) {
                $scope.list = list;
                //$scope.item.selected={};
                $scope.initCheckbox = function (item, parentItem) {
                    return item.selected = parentItem && parentItem.selected || item.selected || false;
                };
                $scope.toggleCheckbox = function (item, parentScope) {
                    if (item.children != null) {
                        $scope.$broadcast('changeChildren', item);
                    }
                    if (parentScope.item != null) {
                        return $scope.$emit('changeParent', parentScope);
                    }
                };
                $scope.$on('changeChildren', function (event, parentItem) {
                    var child, i, len, ref, results;
                    ref = parentItem.children;
                    results = [];
                    for (i = 0, len = ref.length; i < len; i++) {
                        child = ref[i];
                        child.selected = parentItem.selected;
                        if (child.children != null) {
                            results.push($scope.$broadcast('changeChildren', child));
                        } else {
                            results.push(void 0);
                        }
                    }
                    return results;
                });
                return $scope.$on('changeParent', function (event, parentScope) {
                    var children;
                    children = parentScope.item.children;
                    parentScope.item.selected = $filter('selected')(children).length === children.length;
                    parentScope = parentScope.$parent.$parent;
                    if (parentScope.item != null) {
                        return $scope.$broadcast('changeParent', parentScope);
                    }
                });
            }
        ]);
        app.filter('selected', [
            '$filter',
            function ($filter) {
                return function (files) {
                    return $filter('filter')(files, { selected: true });
                };
            }
        ]);
    </script>
</head>
<body>
    <div class="wrapper" ng-app="testApp" ng-controller="treeTable">
        <table class="table-nested">
            <tbody  ng-class="{opened: item.opened}" ng-include="'table_tree.html'" ng-repeat="item in list"></tbody>
        </table>
        <script id="table_tree.html" type="text/ng-template">
            <tr ng-class="{parent: item.children}" ng-init="parentScope = $parent.$parent; initCheckbox(item, parentScope.item)">
                <td class="cell-name">
                    <div class="indent" ng-click="item.opened = !item.opened"></div>
                    <input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox"  />
                    {{item.name}}
                </td>
            </tr>
            <tr class="children" ng-if="item.children && item.children.length > 0">
                <td colspan="4">
                    <table class="table-child">
                        <tbody ng-class="{opened: item.opened}" ng-include="'table_tree.html'" ng-init="level = level + 1" ng-repeat="item in item.children"></tbody>
                    </table>
                </td>
            </tr>
        </script>
        {{item.selected | json}}
    </div>
</body>

check plunker here

Answer 1

Maybe you can do it like this:

JS:

        $scope.seleceds = {};
        $scope.initCheckbox = function (item, parentItem) {
            return $scope.seleceds[item.id] = parentItem && $scope.seleceds[parentItem.id] || $scope.seleceds[item.id] || false;
        };
        $scope.toggleCheckbox = function (item, parentScope) {
            if (item.children != null) {
                $scope.$broadcast('changeChildren', item);
            }
            if (parentScope.item != null) {
                return $scope.$emit('changeParent', parentScope);
            }
        };
        $scope.$on('changeChildren', function (event, parentItem) {
            var child, i, len, ref, results;
            ref = parentItem.children;
            results = [];
            for (i = 0, len = ref.length; i < len; i++) {
                child = ref[i];
                $scope.seleceds[child.id] = $scope.seleceds[parentItem.id];
                if (child.children != null) {
                    results.push($scope.$broadcast('changeChildren', child));
                } else {
                    results.push(void 0);
                }
            }
            return results;
        });
        return $scope.$on('changeParent', function (event, parentScope) {
            var children;
            children = parentScope.item.children;
            $scope.seleceds[parentScope.item.id] = $filter('selected')(children, $scope.seleceds).length === children.length;
            parentScope = parentScope.$parent.$parent;
            if (parentScope.item != null) {
                return $scope.$broadcast('changeParent', parentScope);
            }
        });

Extra filter:

app.filter('selected', ['$filter', function ($filter) {
    return function (files, obj) {
        return $filter('filter')(files, function (value) {
            return obj[value.id]
        });
    };
}]);

app.filter('objToArray', function () {
    return function (input) {
        var results = [];
        for (var key in input) {
            input[key] && results.push(Number(key))
        }
        return results;
    }
});

HTML:

 <input ng-change="toggleCheckbox(item, parentScope)" ng-model="seleceds[item.id]" type="checkbox"/>

And change {{item.selected | json}} to {{seleceds|objToArray}}

you can see a demo HERE