问题:
My requirement is , I am checking two check boxes in 1st table those records are adding in 2nd table this is fine, But if unchecked record removing as improper way , ho...
可以将文章内容翻译成中文,广告屏蔽插件会导致该功能失效:
问题:
My requirement is , I am checking two check boxes in 1st table those records are adding in 2nd table this is fine, But if unchecked record removing as improper way , how can i remove exact row i unchecked, any expert can help me , Thanks, In Advanced.
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>
回答1:
You just need to do $scope.selectedItems.splice(i-1, 1);
in the else
block. Also since result
is a boolean value you can simply use if (result)
in the condition:
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>
回答2:
The issue here is that you are trying to remove via index rather than using the id. Have made some changes in the addRec function and the line in html invoking it. Please go through them once:
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>
回答3:
Just create a directive
as you don't need to repeat the code for table rendering, and use a filter to sort out the selected rows!
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>