Good afternoon! I have a table with pagination (use dir-paginate). When I click on a record, I invoke the ng-class and the record changes color. If I click on another record, the previous one that was marked automatically unchecks, and the new record that received the current click is checked. The problem is when I click the pagination. If the 1st record of the 1st page is marked and I click the page, the 1st record of the 2nd page remains marked and so on. I wanted q after clicking the pagination, the 1st record of the 1st page remained marked and the 1st record of the 2nd page was not marked. It was only when I clicked on it. Let's say, I clicked Joaquim on the 1st page.
WhenIgotopage2Albertowillautomaticallybemarked.
Code:
angular.module("tabela", ['angularUtils.directives.dirPagination']);
angular.module("tabela").controller("tabelactrl", function($scope){
$scope.dados = [
{id: 1, nome: 'José'},
{id: 2, nome: 'Maria'},
{id: 3, nome: 'Joaquim'},
{id: 4, nome: 'Manuel'},
{id: 5, nome: 'Joana'},
{id: 6, nome: 'Serafim'},
{id: 7, nome: 'Rafaela'},
{id: 8, nome: 'Alberto'},
{id: 9, nome: 'Frederico'},
{id: 10, nome: 'Juan'},
];
$scope.itemClicked = function($index){
$scope.selectedIndex = $index;
};
}); .container{
margin-left: auto;
margin-right: auto;
width: 250px;
margin-top: 10%;
}
.alterRow{
background-color: #00BFFF;
font-weight: bold;
}<!DOCTYPE html>
<html ng-app="tabela">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><scriptsrc="https://cdn.rawgit.com/michaelbromley/angularUtils/master/src/directives/pagination/dirPagination.js" type="text/javascript"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
</script>
<style>
</style>
</head>
<body ng-controller="tabelactrl">
<div class="container">
<table class="table">
<thead>
<tr>
<td>ID</td>
<td>Nome</td>
</tr>
</thead>
<tbody>
<tr ng-click="itemClicked($index)" ng-class="{ 'alterRow': $index === selectedIndex }" dir-paginate=" dados in dados | itemsPerPage : 5">
<td>{{dados.id}}</td>
<td>{{dados.nome}}</td>
</tr>
</tbody>
</table>
<dir-pagination-controls max-size="5" direction-links="true" boundary-links="true"></dir-pagination-controls>
</div>
</body>
</html>