It appears that you are implementing something similar to the following:
<!-- HTML -->
<table>
<tr ng-repeat="poster in posters | limitTo: 6">
<td align="center">
Poster {{poster.id}}
<img width="15" height="18"
ng-src="../js/librerias/carousel/images/{{poster.image}}" />
<button type="button" class="btn btn-danger"
ng-click="removePoster(poster.id)">
Delete
</button>
</td>
</tr>
</table>
// Controller:
$scope.posters = [];
$scope.getPosters = function (url) {
$http.post(url, {'method' : 1}).success(function (data, status) {
$scope.posters = data;
});
};
$scope.removePoster = function (id) {
$scope.posters.some(function (poster, idx) {
if (poster.id === id) {
$scope.posters.splice(idx, 1);
return true;
}
});
};
Also, take a look at this quick demo.
Here are some key points:
Using ngRepeat with the <tr> element allows Angular to generate the necessary tr elements based on the content of posters (with a limit set to 6).
The limitTo filter by Angular restricts the posters array to display only the first 6 items in the ngRepeat. Any changes in the posters array will automatically update the DOM accordingly.
IMPORTANT
While this implementation provides a basic understanding of dynamically creating tables in Angular, it may not be the most optimal approach for all scenarios. In a real-world application, consider using a service to fetch data from the server and injecting it into the controller for better organization and data handling.