In my program, I add a name of a phone, mark the checkbox, click on "Search" and it returns me tuples of data in a table, as shown in figure 1.
However, in image 2, when I click "Delete", it deletes only the names of the phones, but the table data in the last query still continues. How can I solve this? I tried a lot and I could not. Thank you!
<!doctype html>
<html ng-app="myApp">
<head>
<title>app</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../static/css/bootstrap.css">
<link rel="stylesheet" href="../static/css/post_list.css">
<link rel="stylesheet" href="../static/css/jumbotron-narrow.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script><style>.container{width:500px;text-align:center;margin-left:auto;margin-right:auto;margin-top:20px;}.selected{font-size:16px;}.bold{font-weight:bold;text-decoration:underline;}.distance{margin-bottom:20px;}.btnspan.glyphicon{opacity:0;}.btn.activespan.glyphicon{opacity:1;}</style><script>varapp=angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http) {
$scope.devices = [];
$scope.addDevice = function (device) {
$scope.devices.push(device);
delete $scope.device;
};
$scope.delDevice = function (devices) {
$scope.devices = devices.filter(function (device){
if(!device.selected) return device;
});
};
$scope.isDeviceSelected = function (devices) {
return devices.some(function (device) {
return device.selected;
});
};
$scope.listPost = function (devices) {
$http({
method: 'POST',
url: '/getPosts',
data: {
device_list: devices
}
}).then(function(response) {
console.log('mm', devices)
$scope.posts = response.data;
console.log('mm', response.data);
}, function(error) {
console.log(error);
});
};
});
</script>
</head>
<body>
<div class="container" ng-controller="myCtrl">
<div class="row">
<div class="page-header">
<h1>Phones Defect</h1>
</div>
</div>
<div class="row">
<form class="form-inline" name="deviceform">
<input type="text" ng-model="device.name" placeholder="Add a Device" ng-required="true">
<button class="btn btn-primary" ng-click="addDevice(device)"
ng-disabled="deviceform.$invalid || devices.length == 5">
Add
</button>
</form>
</div>
<div>
<table class="distance">
<thead>
<th></th>
</thead>
<tbody>
<tr ng-class="{'selected bold': device.selected}" ng-repeat="device in devices">
<td><input type="checkbox" ng-model="device.selected">
{{'{{device.name}}'}}
</td>
</tr>
</tbody>
</table>
<div ng-hide="!isDeviceSelected(devices)">
<button class="btn btn-primary" ng-click="listPost(devices)">Search</button>
<button class="btn btn-danger" ng-click="delDevice(devices)">Delete</button>
</div>
</div>
<hr/>
<div class="row">
<table id="post_list" class="table table-striped">
<thead>
<tr>
<th>Select</th>
<th>ID</th>
<th>Device</th>
<th>Component</th>
<th>Content</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="post in posts" class="selected-{{'{{post.selected}}'}}">
<td><input type="checkbox" id="{{'{{post.id}}'}}" ng-model="post.selected"></td>
<td>{{'{{post.id}}'}}</td>
<td>{{'{{post.device}}'}}</td>
<td>{{'{{post.component}}'}}</td>
<td>{{'{{post.df_content}}'}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html> 
