Checks dont get unchecked on nested controllers

dsprogramacion commented 8 years ago

Hi This is my template:

<body ng-app="App" ng-controller="MainController" layout="column" flex>
    <section ui-view layout="row" flex>
            <md-sidenav>
               ...
            </md-sidenav>
            <md-content layout="column" flex>
            <section ui-view layout="row" flex>
                       ...
                       <md-checkbox ng-model="$parent.$parent.checkboxAll" ng-change="toggleCheck()">             
                       </md-checkbox>
                       ...
                       <tr ng-repeat="o in pagedItems[currentPage - 1]">
                            <td md-cell ng-click="$event.stopPropagation()">
                                  <md-checkbox checklist-model="$parent.$parent.checkedItems" 
                                  checklist-value="o" ></md-checkbox>
                            </td>
                            ...
                      </tr>
                </section>
            </md-content>
        </section>
</body>

And those are is my controller: `.controller('MainController', ['$scope', '$filter', '$state', '$timeout', 'AUTH_EVENTS', 'ITEMS_EVENTS', function($scope, $filter, $state, $timeout, AUTH_EVENTS, ITEMS_EVENTS) {

$scope.currentPage;
$scope.itemsPerPage = {prev: 15, current: 15};
$scope.quantities = [15, 30, 50, 100];

$scope.initialSort;
$scope.itemsSortBy;

$scope.items;
$scope.itemsCount;
$scope.pagedItems;

$scope.searchInput;

$scope.checkboxKeys;
$scope.checkboxAll;
$scope.checkedItems;

//Pagination, Checkbox and Search Functions
$scope.toggleCheck = function() {

    $scope.checkedItems = [];

    if($scope.checkboxAll) {

        var allItems = angular.copy($scope.pagedItems[$scope.currentPage-1]);
        for(var i in allItems) {

            obj = {};
            for(var k in $scope.checkboxKeys) {

                obj[k] = allItems[i][$scope.checkboxKeys[k]];
            }

            $scope.checkedItems.push(obj);
        }
    }
};

var searchMatch = function(haystack, needle) {

    return haystack.toLowerCase().indexOf(needle.toLowerCase()) !== -1;
};

$scope.search = function(sort, initialSort, items) {

    $scope.checkboxAll = false;
    $scope.checkedItems = [];

    $scope.currentPage = 1;

    if(initialSort) {

        $scope.items = items;
        $scope.itemsSortBy = initialSort;
        $scope.initialSort = initialSort;
    }

    if(sort || $scope.itemsSortBy != $scope.initialSort) {

        var sortingOrder = sort || $scope.itemsSortBy;
        $scope.filteredItems = $filter('sortTableData')($scope.items, sortingOrder);

    } else {

        if($scope.searchInput) {

            $scope.filteredItems = $filter('filter')($scope.items, function(item) {

                for(var attr in item) {

                    if(item[attr] != null) {

                        if(searchMatch(item[attr], $scope.searchInput)) {

                            return true;
                        }
                    }
                }

                return false;
            });

        } else {

            $scope.filteredItems = $scope.items;
        }
    }

    $scope.itemsCount = $scope.filteredItems.length;
    $scope.groupToPages();
};

$scope.groupToPages = function() {

    $scope.pagedItems = [];

    for(var i = 0; i < $scope.itemsCount; i++) {

        if(i % $scope.itemsPerPage.current === 0) {

            var index = Math.floor(i / $scope.itemsPerPage.current);
            $scope.pagedItems[index] = [$scope.filteredItems[i]];

        } else {

            $scope.pagedItems[index].push($scope.filteredItems[i]);
        }
    }
};

$scope.paginate = function(page, limit) {

    if($scope.itemsPerPage.current != $scope.itemsPerPage.prev) {

        $scope.itemsPerPage.prev = $scope.itemsPerPage.current;
        $scope.search(null, null, $scope.items);
    }
};`

And the other Controller has inside (related to the topic):

$scope.sortBy = '-created';
$scope.$parent.$parent.checkboxKeys = {orderId: 'id', orderCanalId: 'orderCanalId', canalId: 'canalId'};

$scope.checkboxAll = false;
$scope.checkedItems = [];

$scope.search(null, $scope.sortBy, response.data.data);

When i click on the checkbox all check, it works fine, all the checks get checked, but when i click again, even tho theres no data inside the array (which is the ng-model for the checklist-model), the checks stay checked. Please Help!!!

vigneshnallamad commented 7 years ago

I'm facing the same issue. Please help.

dsprogramacion commented 7 years ago

Hi. It ended up being that there are angular materials design libraries that have all the table functions you need included, also the checking-unchecking one, you don't need to nest the checklist model anymore! Go on google and look for md-table there're a few ones, use the one that fits better.

Enviado desde mi iPhone

El 12 feb 2017, a las 12:07, vignesh notifications@github.com escribió:

I'm facing the same issue. Please help.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

vigneshnallamad commented 7 years ago

Exactly.. I ended up using the md-checkbox way to solve the issue... Thank you

vitalets / checklist-model

Checks dont get unchecked on nested controllers #148