0
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 image 1.
However, in image 2, when I click on "Delete", it erases only the names of the phones, but the table data in the last query still continues. How can I fix it? I’ve tried a lot and I couldn’t. I thank you in advance!
<!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;
}
.btn span.glyphicon {
opacity: 0;
}
.btn.active span.glyphicon {
opacity: 1;
}
</style>
<script>
var app = 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>
I think in deleting function you have to update the list
$scope.postsagain, removing the items that were deleted.– Leandro Simões
I understand, but could you give an example of how this could be please? I am new to programming with Angular. Thank you very much!
– Antonio Braz Finizola