如何从Jhipster中的表中删除选中的行

Question

books.html

 <div class="table-responsive">
    <table class="jh-table table table-striped">
        <thead>
            <tr jh-sort="vm.predicate" ascending="vm.reverse" callback="vm.reset()">
                <!-- <th jh-sort-by="id"><span>ID</span> <span class="glyphicon glyphicon-sort"></span></th> -->
                <th><input type="checkbox" ng-change="vm.selectAll()" ng-model="vm.checkAll[vm.page]"></th>
                <th jh-sort-by="bookName"><span>Book Name</span> <span class="glyphicon glyphicon-sort"></span></th>
                <th jh-sort-by="remarks"><span>Remarks</span></th>
                <th></th>
            </tr>
        </thead>
        <tbody infinite-scroll="vm.loadPage(vm.page + 1)" infinite-scroll-disabled="vm.page >= vm.links['last']">
            <tr ng-repeat="book in vm.books track by book.id">
                <!-- <td><a ui-sref="book-detail({id:book.id})">{{book.id}}</a></td> -->
                 <td><input type="checkbox" ng-model="vm.checkboxes[book.id]" ng-change="vm.select(book)"/></td>
                 <!--<td><input type="checkbox" ng-model="seletedTasks[$index]"/></td> -->
                <td>{{($index + 1) + (vm.page - 1) * vm.itemsPerPage}}</td>
                <td>{{book.bookName}}</td>
                <td>{{book.remarks}}</td>
                <td class="text-right">
                    <div class="btn-group flex-btn-group-container">
                        <button type="submit"
                                ui-sref="book-detail({id:book.id})"
                                class="btn btn-info btn-sm">View
                            <span class="glyphicon glyphicon-eye-open"></span>
                            <span class="hidden-xs hidden-sm"></span>
                        </button>
                        <button type="submit"
                                ui-sref="book.edit({id:book.id})"
                                class="btn btn-primary btn-sm">Edit
                            <span class="glyphicon glyphicon-pencil"></span>
                            <span class="hidden-xs hidden-sm"></span>
                        </button>
                        <button type="submit"
                                ui-sref="book.delete({id:book.id})"
                                class="btn btn-danger btn-sm">Delete
                            <span class="glyphicon glyphicon-remove-circle"></span>
                            <span class="hidden-xs hidden-sm"></span>
                        </button>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
 <div class="form-group">
    <button ng-if="0 < vm.selectedItems.length" type="submit"
    tooltip-placement="bottom"  uib-tooltip="{{'entity.action.delete' | translate}}"
     ui-sref="pen.delete-sel({selectedItems: vm.selectedItems})"
    class="btn btn-danger btnn xs">Delete
    <i class="fa fa-trash-o"></i>
     </button>
</div>

book.controller.js

(function() {
'use strict';

angular
    .module('penApp')
    .controller('BookController', BookController);

BookController.$inject = ['$scope', '$state', 'Book', 'ParseLinks', 'AlertService'];

function BookController ($scope, $state, Book, ParseLinks, AlertService) {
    var vm = this;

    vm.books = [];
    vm.loadPage = loadPage;
    vm.page = 0;
    vm.links = {
        last: 0
    };
    vm.predicate = 'id';
    vm.reset = reset;
    vm.reverse = true;

    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;
            }
        }
    };

    loadAll();
    function loadAll () {
        Book.query({
            page: vm.page,
            size: 20,
            sort: sort()
        }, onSuccess, onError);
        function sort() {
            var result = [vm.predicate + ',' + (vm.reverse ? 'asc' : 'desc')];
            if (vm.predicate !== 'id') {
                result.push('id');
            }
            return result;
        }

        function onSuccess(data, headers) {
            vm.links = ParseLinks.parse(headers('link'));
            vm.totalItems = headers('X-Total-Count');
            for (var i = 0; i < data.length; i++) {
                vm.books.push(data[i]);
            }
        }

        function onError(error) {
            AlertService.error(error.data.message);
        }
    }

    function reset () {
        vm.page = 0;
        vm.books = [];
        loadAll();
    }

    function loadPage(page) {
        vm.page = page;
        loadAll();
    }
}})();

book.state.js

.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',
                controllerAs: 'vm',
                size: 'md'
            }).result.then(function() {
                    $state.go('books', null, { reload: true });
                }, function() {
                    $state.go('^');
                });
        }]
    });

book.service.js

(function() {
'use strict';
angular
    .module('penApp')
    .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':''}},
        'get': {
            method: 'GET',
            transformResponse: function (data) {
                if (data) {
                    data = angular.fromJson(data);
                }
                return data;
            }
        },
        'update': { method:'PUT' }
    });
}})();

book-delete-sel-dialog.controller.js

(function() {
'use strict';

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

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

function BookDeleteController($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");
            });
    }
}})();

BookResource.java

 @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();
    }

When I uncomment button code(books.html). I cannot see any record on my table. If I commented that button then I can see records. I want to delete records which is selected by checkbox. I am not getting what to do. I think there is problem in uib-tooltip. Can anyone please help me out ? What should I change in my code?

Answer 1

Update the ''books.delete-sel' state in 'book.state.js' to this:

    .state('book.delete-sel', { // Previous: 'books.delete-sel'
        parent: 'book',
        url: '/delete-sel', // Previous: '/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', // The book-delete-sel-dialog.html didn't exist before
                /*controller: 'BookDeleteController',*/
                controller: 'BookDeleteSelController',
                controllerAs: 'vm',
                size: 'md'
            }).result.then(function() {
                    $state.go('book', null, { reload: true }); // Previous: 'books'
                }, function() {
                    $state.go('^');
                });
        }]
    })

See this link for the full source codes.

Answer 2

Seems like the translate filter is not working, which in turn aborts your controller and therefore the loading of the books and/or the html cannot be compiled by angular, so that the ng-repeat isn't executed.

Did you try simple text in your tooltip

uib-tooltip="Delete"

? If this works, you can try to put the translation into the controller using $translate :

//...
BookController.$inject = ['$scope', '$state', 'Book', 'ParseLinks', 'AlertService', '$translate'];
BookController ($scope, $state, Book, ParseLinks, AlertService, $translate) {
    //...
    vm.deleteTooltip = $translate.instant('entity.action.delete');
//...

and then

uib-tooltip="{{vm.deleteTooltip}}"