我正在检查第一个表中的两个复选框,将那些记录添加到第二个表中,这很好。但是,如果以不正确的方式删除未检查的记录,该如何删除我未检查的确切行。
var app = angular.module('myApp',[]);
app.controller("homeCtrl", function($scope) {
$scope.items = [{
itemID: 'BR063',
itemValue: 'sagsfgjkfdsffsdfsd'
}, {
itemID: 'BR06417',
itemValue: '1231231231123'
}];
$scope.selectedItems = [];
$scope.addRec = function(result, i){
if(result == true){
$scope.selectedItems.push($scope.items[i-1]);
}
else{
$scope.selectedItems.splice($scope.items[i],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.3.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.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<div ng-app = 'myApp' ng-controller="homeCtrl">
<h1>Select Rows</h1>
<table style="width:50%" class="table-responsive table-bordered ">
<tr>
<th class="text-center">Index</th>
<th class="text-center">Item ID</th>
<th class="text-center">Item Values</th>
<th class="text-center">Select</th>
</tr>
<tr ng-repeat="x in items">
<td class="text-center">{{$index+1}}</td>
<td class="text-center">{{x.itemID}}</td>
<td class="text-center">{{x.itemValue}}</td>
<td class="text-center"><input type="checkbox" ng-model="itsVal" ng-change = "addRec(itsVal, $index+1)";/></td>
</tr>
</table>
<h1>Selected Rows</h1>
<table style="width:50%" class="table-responsive table-bordered ">
<tr>
<th class="text-center">Index</th>
<th class="text-center">Item ID</th>
<th class="text-center">Item Values</th>
<th class="text-center">Select</th>
</tr>
<tr ng-repeat="x in selectedItems">
<td class="text-center">{{$index+1}}</td>
<td class="text-center">{{x.itemID}}</td>
<td class="text-center">{{x.itemValue}}</td>
<td class="text-center"><input type="checkbox" /></td>
</tr>
</table>
<div>
答案 0 :(得分:0)
您只需要在$scope.selectedItems.splice(i-1, 1);
块中执行else
。另外,由于result
是布尔值,因此您可以在以下条件下简单地使用if (result)
:
var app = angular.module('myApp', []);
app.controller("homeCtrl", function($scope) {
$scope.items = [{
itemID: 'BR063',
itemValue: 'sagsfgjkfdsffsdfsd'
}, {
itemID: 'BR06417',
itemValue: '1231231231123'
}];
$scope.selectedItems = [];
$scope.addRec = function(result, i) {
if (result) {
$scope.selectedItems.push($scope.items[i - 1]);
} else {
$scope.selectedItems.splice(i-1, 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.3.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.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<div ng-app='myApp' ng-controller="homeCtrl">
<h1>Select Rows</h1>
<table style="width:50%" class="table-responsive table-bordered ">
<tr>
<th class="text-center">Index</th>
<th class="text-center">Item ID</th>
<th class="text-center">Item Values</th>
<th class="text-center">Select</th>
</tr>
<tr ng-repeat="x in items">
<td class="text-center">{{$index+1}}</td>
<td class="text-center">{{x.itemID}}</td>
<td class="text-center">{{x.itemValue}}</td>
<td class="text-center"><input type="checkbox" ng-model="itsVal" ng-change="addRec(itsVal, $index+1)" ;/></td>
</tr>
</table>
<h1>Selected Rows</h1>
<table style="width:50%" class="table-responsive table-bordered ">
<tr>
<th class="text-center">Index</th>
<th class="text-center">Item ID</th>
<th class="text-center">Item Values</th>
<th class="text-center">Select</th>
</tr>
<tr ng-repeat="x in selectedItems">
<td class="text-center">{{$index+1}}</td>
<td class="text-center">{{x.itemID}}</td>
<td class="text-center">{{x.itemValue}}</td>
<td class="text-center"><input type="checkbox" /></td>
</tr>
</table>
<div>
答案 1 :(得分:0)
这里的问题是您试图通过索引而不是使用ID来删除。在 addRec 函数和html中调用它的行中进行了一些更改。请仔细检查一次:
var app = angular.module('myApp',[]);
app.controller("homeCtrl", function($scope) {
$scope.items = [{
itemID: 'BR063',
itemValue: 'sagsfgjkfdsffsdfsd'
}, {
itemID: 'BR06417',
itemValue: '1231231231123'
}];
$scope.selectedItems = [];
$scope.addRec = function(result, i,itemId){
if(result == true){
$scope.selectedItems.push($scope.items[i-1]);
}
else{
var index=0;
var isMatched = false;
angular.forEach($scope.selectedItems,function(item) {
if(isMatched === false) {
if(item.itemID === itemId) {
isMatched = true;
}
else {
index++;
}
}
});
$scope.selectedItems.splice(index,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.3.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.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<div ng-app = 'myApp' ng-controller="homeCtrl">
<h1>Select Rows</h1>
<table style="width:50%" class="table-responsive table-bordered ">
<tr>
<th class="text-center">Index</th>
<th class="text-center">Item ID</th>
<th class="text-center">Item Values</th>
<th class="text-center">Select</th>
</tr>
<tr ng-repeat="x in items track by x.itemID">
<td class="text-center">{{$index+1}}</td>
<td class="text-center">{{x.itemID}}</td>
<td class="text-center">{{x.itemValue}}</td>
<td class="text-center"><input type="checkbox" ng-model="itsVal" ng-change = "addRec(itsVal, $index+1,x.itemID)";/></td>
</tr>
</table>
<h1>Selected Rows</h1>
<table style="width:50%" class="table-responsive table-bordered ">
<tr>
<th class="text-center">Index</th>
<th class="text-center">Item ID</th>
<th class="text-center">Item Values</th>
<th class="text-center">Select</th>
</tr>
<tr ng-repeat="x in selectedItems track by x.itemID">
<td class="text-center">{{$index+1}}</td>
<td class="text-center">{{x.itemID}}</td>
<td class="text-center">{{x.itemValue}}</td>
<td class="text-center"><input type="checkbox" /></td>
</tr>
</table>
<div>
答案 2 :(得分:0)
只需创建一个directive
,因为您无需重复表渲染代码,并使用过滤器对选定的行进行排序!
var app = angular.module('myApp', []);
app.directive("tableRenderer", function(){
return {
restrict: 'E',
template: `
<table style="width:50%" class="table-responsive table-bordered ">
<tr>
<th class="text-center">Index</th>
<th class="text-center">Item ID</th>
<th class="text-center">Item Values</th>
<th class="text-center">Select</th>
</tr>
<tr ng-repeat="x in list | filter:filter">
<td class="text-center">{{$index+1}}</td>
<td class="text-center">{{x.itemID}}</td>
<td class="text-center">{{x.itemValue}}</td>
<td class="text-center"><input type="checkbox" ng-model="x.selected" ;/></td>
</tr>
</table>
`,
scope: {
list: '=',
filter: '='
},
link: function(scope, elem, attr) {
}
}
})
app.controller("homeCtrl", function($scope) {
$scope.items = [{
itemID: 'BR063',
itemValue: 'sagsfgjkfdsffsdfsd',
selected: false
}, {
itemID: 'BR06417',
itemValue: '1231231231123',
selected: false
}];
});
<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.3.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.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<div ng-app='myApp' ng-controller="homeCtrl">
<h1>Select Rows</h1>
<table-renderer list="items"></table-renderer>
<h1>Selected Rows</h1>
<table-renderer list="items" filter="{selected: true}"></table-renderer>
<div>