复选框不起作用以及如何使用复选框
删除记录
(function() {
'use strict';
angular
.module('banksApp')
.controller('HdfcController', HdfcController);
HdfcController.$inject = ['$scope', '$state', 'Hdfc', 'ParseLinks', 'AlertService'];
function HdfcController ($scope, $state, Hdfc, ParseLinks, AlertService) {
var vm = this;
vm.hdfcs = [];
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;
loadAll();
function loadAll () {
Hdfc.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.hdfcs.push(data[i]);
}
}
function onError(error) {
AlertService.error(error.data.message);
}
}
function reset () {
vm.page = 0;
vm.hdfcs = [];
loadAll();
}
function loadPage(page) {
vm.page = page;
loadAll();
}
function selectAll () {
var value = vm.checkAll[vm.page];
angular.forEach(vm.hdfcs, 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.hdfcs.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.hdfcs.length) {
vm.checkAll[vm.page] = false;
}
}
};
}
})(); <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 jh-sort-by="check"><input type="checkbox" ng-model="vm.selectedAll" ng-click="vm.checkAll[vm.page]" /></th>
<th jh-sort-by="bankName"><span>Bank Name</span> <span class="glyphicon glyphicon-sort"></span></th>
<th jh-sort-by="rejectedRemarks"><span>Rejected Remarks</span> <span class="glyphicon glyphicon-sort"></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="hdfc in vm.hdfcs track by hdfc.id">
<td><a ui-sref="hdfc-detail({id:hdfc.check})">{{hdfc.check}}</a></td>
<td><input type="checkbox" ng-model="vm.checkboxes[hdfc.id]" ng-change="vm.select(hdfc)"/></td>
<td>{{($index + 1) + (vm.page - 1) * vm.itemsPerPage}}</td>
<td>{{hdfc.bankName}}</td>
<td>{{hdfc.rejectedRemarks}}</td>
<td class="text-right">
<div class="btn-group flex-btn-group-container">
<button type="submit"
ui-sref="hdfc-detail({check:hdfc.check})"
class="btn btn-info btn-sm">
<span class="glyphicon glyphicon-eye-open"></span>
<span class="hidden-xs hidden-sm"></span>
</button>
<button type="submit"
ui-sref="hdfc.edit({check:hdfc.check})"
class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-pencil"></span>
<span class="hidden-xs hidden-sm"></span>
</button>
<button type="submit"
ui-sref="hdfc.delete({check:hdfc.check})"
class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-remove-circle"></span>
<span class="hidden-xs hidden-sm"></span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
` ID 银行名 被拒绝的评论 = vm.links ['last']“＆gt; {{hdfc.check}} {{（$ index + 1）+（vm.page - 1）* vm.itemsPerPage}} {{hdfc.bankName}} {{hdfc.rejectedRemarks}}
答案 0 :(得分：0)
使用拼接功能删除记录。
<!DOCTYPE html>
<html lang="en">
<head>
<title>TASKS</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="sampleController">
<h3>To do</h3>
<table class="table table-striped table-hover col-sm-4">
<thead>
<tr>
<th>Task</th>
<th>Time</th>
<th>Done</th>
<th><input type="checkbox" ng-model="allSelected" ng-click="selectAll()"/> Select All</th>
<th><input type="button" value="delete All Rows" ng-show="allSelected" ng-click="deleteAllRows()"/></th>
<th><input type="button" value="Reset Data" ng-click="ResetData()"/></th>
</tr>
</thead>
<tbody ng-repeat="x in firstTable">
<tr>
<td>x.taskName</td>
<td> x.tastTime</td>
<td><input type="checkbox" ng-model="seletedTasks[$index]"/></td>
<td><input type="button" value="Delete Selected Row" ng-show="seletedTasks[$index]" ng-click="deleteRow($index)"/>
</tr>
</tbody>
</table>
</div>
</body>
<script>
var app=angular.module("app",[]);
app.controller("sampleController",["$scope",function($scope){
$scope.firstTable=[{taskName:'Task_One',tastTime:'5 min'},{taskName:'Task_Two',tastTime:'2 min'},{taskName:'Task_Three',tastTime:'2 min'}];
$scope.seletedTasks=[];
$scope.ResetData=function(){
$scope.firstTable=[{taskName:'Task_One',tastTime:'5 min'},{taskName:'Task_Two',tastTime:'2 min'},{taskName:'Task_Three',tastTime:'2 min'}];
$scope.secondTable=[];
$scope.seletedTasks=[];
$scope.allSelected=false;
}
$scope.deleteAllRows=function(){
$scope.firstTable=[];
$scope.seletedTasks=[];
$scope.allSelected=false;
};
$scope.deleteRow=function(index){
$scope.seletedTasks.splice(index,1);
$scope.firstTable.splice(index,1);
};
$scope.selectAll=function(){
if($scope.allSelected){
angular.forEach($scope.firstTable,function(value,index){
$scope.seletedTasks[index]=true;
});
}
};
}]);
</script>
</html>