Atul Atul - 5 days ago 5
AngularJS Question

How to delete checked row or rows from table in jhipster

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

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.

Comments