How to use checkbox on jhipster table and delete selected rows.

book-delete-sel-dialog.controller.js

(function() {
    'use strict';

    angular
        .module('schoolApp')
        .controller('BookSelDeleteController',BookSelDeleteController);

    BookDeleteController.$inject = ['$uibModalInstance', '$stateParams', 'Book'];

    function BookSelDeleteController($uibModalInstance, $stateParams, Book) {
        var vm = this;

        vm.selectedItems = $stateParams.selectedItems;
        vm.clear = clear;
        vm.confirmDelete = confirmDelete;

        function clear () {
            $uibModalInstance.dismiss('cancel');
        }

        function confirmDelete (id) {
            Book.deleteSel({}, vm.selectedItems,
                function () {
                    $uibModalInstance.close(true);
                },
                function () {
                    console.log("An error occurred");
                });
        }
    }
})();

book.service.js

(function() {
    'use strict';
    angular
        .module('schoolApp')
        .factory('Book', Book);

    Book.$inject = ['$resource', 'DateUtils'];

    function Book ($resource, DateUtils) {
        var resourceUrl =  'api/books/:id';

        return $resource(resourceUrl, {}, {
            'query': { method: 'GET', isArray: true},
            'deleteSel': { method: 'POST', isArray: true, params:{'delete-sel':''}},
            ...
        });
    }
})();

book.state.js

            ...
            .state('book.delete-sel', {
                parent: 'book',
                url: '/delete-sel',
                data: {
                    authorities: ['ROLE_USER']
                },
                params: {
                    selectedItems: null
                },
                onEnter: ['$stateParams', '$state', '$uibModal', function($stateParams, $state, $uibModal) {
                    $uibModal.open({
                        templateUrl: 'app/entity/book/book-delete-sel-dialog.html',
                        controller: 'BookSelDeleteController',
                        controllerAs: 'vm',
                        size: 'md'
                    }).result.then(function() {
                            $state.go('books', null, { reload: true });
                        }, function() {
                            $state.go('^');
                        });
                }]
            });

BookResource.java

    ...
    @Inject
    BookRepository bookRepository;

    /**
     * DELETE  /books/:id : delete the "id" book.
     *
     * @param books the id of the book to delete
     * @return the ResponseEntity with status 200 (OK)
     */
    //@DeleteMapping("/books")
    @RequestMapping(value = "/books",
        params = "delete-sel",
        method = RequestMethod.POST,
        produces = MediaType.APPLICATION_JSON_VALUE)
    @Timed
    public ResponseEntity<Void> deleteBooks(@RequestBody List<Book> books) {
        log.debug("REST request to delete Books : {}", books.size());
        bookRepository.delete(books);
        return ResponseEntity.ok().headers(HeaderUtil.createEntityDeletionAlert("book", null)).build();
    }
    ...

books.controller.js

vm.checkAll = [];
var map = {};
vm.checkboxes = [];
vm.selectedItems = [];

vm.selectAll = selectAll;
vm.select = select;

function selectAll () {
    var value = vm.checkAll[vm.page];
    angular.forEach(vm.books, function(item) {
        if (angular.isDefined(item.id)) {
            if(vm.checkboxes[item.id] != value) {
                vm.checkboxes[item.id] = value;
                vm.select(item);
            }
        }
   });
};

function select (item) {
    var value = vm.checkboxes[item.id];

    if(value) {
        vm.selectedItems.push(item);
        if(map[vm.page] == null) map[vm.page] = 1;
        else map[vm.page] = map[vm.page] + 1;
        if(map[vm.page] == vm.books.length) {
            vm.checkAll[vm.page] = true;
        }
    } else {
        vm.selectedItems.splice(item, 1);
        if(map[vm.page] == null) map[vm.page] = 0;
        else map[vm.page] = map[vm.page] - 1;
        if(map[vm.page] < vm.books.length) {
            vm.checkAll[vm.page] = false;
        }
    }
};

books.html

<button ng-if="vm.selectedItems.length > 0" type="submit"
        tooltip-placement="top" uib-tooltip="{{'entity.action.delete' | translate}}"
        ui-sref="book.delete-sel({selectedItems: vm.selectedItems})"
        class="btn btn-success">
    <i class="fa fa-trash-o"></i>
</button>

<table>
    <thead>
        <tr jh-sort="vm.predicate" ascending="vm.reverse" callback="vm.transition()">
            <th><input type="checkbox" icheck ng-change="vm.selectAll()" ng-model="vm.checkAll[vm.page]"></th>
            <th jh-sort-by="id"><span data-translate="global.field.id">ID</span></th>
            ---
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="book in vm.books track by book.id">
            <td><input type="checkbox" icheck ng-model="vm.checkboxes[book.id]" ng-change="vm.select(book)"/></td>
            <td>{{($index + 1) + (vm.page - 1) * vm.itemsPerPage}}</td>
            ...
        </tr>
    </tbody>
</table>

If you are using Google chrome, screenshot the developer console and drop it here @Atul21

I meant in the "books.delete-sel" state @Atul21

@japharr I changed schoolApp to penapp but I didn't know where will I get pen.delete-sel

check your pen.state.js @Atul21

@japharr my app name is pen and entity name is book

@Atul21 do the screenshot of the book.state.js and drop it here

or just copy and paste it

`(function() {
'use strict';

angular
    .module('penApp')
    .config(stateConfig);

stateConfig.$inject = ['$stateProvider'];

function stateConfig($stateProvider) {
    $stateProvider
    .state('book', {
        parent: 'entity',
        url: '/book',
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'Books'
        },
        views: {
            'content@': {
                templateUrl: 'app/entities/book/books.html',
                controller: 'BookController',
                controllerAs: 'vm'
            }
        },
        resolve: {
        }
    })
    .state('book-detail', {
        parent: 'entity',
        url: '/book/{id}',
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'Book'
        },
        views: {
            'content@': {
                templateUrl: 'app/entities/book/book-detail.html',
                controller: 'BookDetailController',
                controllerAs: 'vm'
            }
        },
        resolve: {
            entity: ['$stateParams', 'Book', function($stateParams, Book) {
                return Book.get({id : $stateParams.id}).$promise;
            }],
            previousState: ["$state", function ($state) {
                var currentStateData = {
                    name: $state.current.name || 'book',
                    params: $state.params,
                    url: $state.href($state.current.name, $state.params)
                };
                return currentStateData;
            }]
        }
    })
    .state('book-detail.edit', {
        parent: 'book-detail',
        url: '/detail/edit',
        data: {
            authorities: ['ROLE_USER']
        },
        onEnter: ['$stateParams', '$state', '$uibModal', function($stateParams, $state, $uibModal) {
            $uibModal.open({
                templateUrl: 'app/entities/book/book-dialog.html',
                controller: 'BookDialogController',
                controllerAs: 'vm',
                backdrop: 'static',
                size: 'lg',
                resolve: {
                    entity: ['Book', function(Book) {
                        return Book.get({id : $stateParams.id}).$promise;
                    }]
                }
            }).result.then(function() {
                $state.go('^', {}, { reload: false });
            }, function() {
                $state.go('^');
            });
        }]
    })
    .state('book.new', {
        parent: 'book',
        url: '/new',
        data: {
            authorities: ['ROLE_USER']
        },
        onEnter: ['$stateParams', '$state', '$uibModal', function($stateParams, $state, $uibModal) {
            $uibModal.open({
                templateUrl: 'app/entities/book/book-dialog.html',
                controller: 'BookDialogController',
                controllerAs: 'vm',
                backdrop: 'static',
                size: 'lg',
                resolve: {
                    entity: function () {
                        return {
                            bookName: null,
                            remarks: null,
                            id: null
                        };
                    }
                }
            }).result.then(function() {
                $state.go('book', null, { reload: 'book' });
            }, function() {
                $state.go('book');
            });
        }]
    })
    .state('book.edit', {
        parent: 'book',
        url: '/{id}/edit',
        data: {
            authorities: ['ROLE_USER']
        },
        onEnter: ['$stateParams', '$state', '$uibModal', function($stateParams, $state, $uibModal) {
            $uibModal.open({
                templateUrl: 'app/entities/book/book-dialog.html',
                controller: 'BookDialogController',
                controllerAs: 'vm',
                backdrop: 'static',
                size: 'lg',
                resolve: {
                    entity: ['Book', function(Book) {
                        return Book.get({id : $stateParams.id}).$promise;
                    }]
                }
            }).result.then(function() {
                $state.go('book', null, { reload: 'book' });
            }, function() {
                $state.go('^');
            });
        }]
    })
    .state('book.delete', {
        parent: 'book',
        url: '/{id}/delete',
        data: {
            authorities: ['ROLE_USER']
        },
        onEnter: ['$stateParams', '$state', '$uibModal', function($stateParams, $state, $uibModal) {
            $uibModal.open({
                templateUrl: 'app/entities/book/book-delete-dialog.html',
                controller: 'BookDeleteController',
                controllerAs: 'vm',
                size: 'md',
                resolve: {
                    entity: ['Book', function(Book) {
                        return Book.get({id : $stateParams.id}).$promise;
                    }]
                }
            }).result.then(function() {
                $state.go('book', null, { reload: 'book' });
            }, function() {
                $state.go('^');
            });
        }]
    })
    
    .state('books.delete-sel', {
        parent: 'books',
        url: '/delete',
        data: {
            authorities: ['ROLE_USER']
        },
        params: {
            selectedItems: null
        },
        onEnter: ['$stateParams', '$state', '$uibModal', function($stateParams, $state, $uibModal) {
            $uibModal.open({
                templateUrl: 'app/entities/book/book-delete-sel-dialog.html',
                /*controller: 'BookDeleteController',*/
                controller: 'BookDeleteSelController',
                controllerAs: 'vm',
                size: 'md'
            }).result.then(function() {
                    $state.go('books', null, { reload: true });
                }, function() {
                    $state.go('^');
                });
        }]
    });
    
}

})();
`

not working @japharr

@Atul21 what is the error in the developer console?

@Atul21

The error should be coming from the book-delete-sel-dialog.controller.js change the "schoolApp" to "penApp"

book-delete-sel-dialog.controller.js

`(function() {
'use strict';

angular
    .module('penApp')
    .controller('BookDeleteController',BookDeleteController);
     /*.controller('BookDeleteSelController',BookDeleteSelController);*/
BookDeleteController.$inject = ['$uibModalInstance', '$stateParams', 'Book'];

function BookDeleteController($uibModalInstance, $stateParams, Book) {
/*function BookDeleteSeController($uibModalInstance, $stateParams, Book) {*/
    var vm = this;

    vm.selectedItems = $stateParams.selectedItems;
    vm.clear = clear;
    vm.confirmDelete = confirmDelete;

    function clear () {
        $uibModalInstance.dismiss('cancel');
    }

    function confirmDelete (id) {
        Book.deleteSel({}, vm.selectedItems,
            function () {
                $uibModalInstance.close(true);
            },
            function () {
                console.log("An error occurred");
            });
    }
}

})();`

@japharr did you get my mail? in which I sent you each and every file of book entity

Check the book.state.js
change the "books.delete-sel" to "book.delete-sel"

Check the delete all button in the html and confirm the ui-sref to be book.delete-sel

No

@japharr it is giving same error in developer console

@japharr Can I send you all files in book entities?

@Atul21
yes, you can

@japharr I sent you

@japharr please check your mail.

@Atul21
no mail from you

@japharr please check your spam folder.

@Atul21

Check your mail for update.