Select register in angular pagination

0

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>
    
asked by anonymous 17.11.2016 / 16:28

1 answer

0

Oops, man ... Do not use index in this situation, because index 1 on page 1 is the same as on page 2, correct?!

In this case I used a unique identifier (ID) to work, just change

<tr ng-click="itemClicked($index)" ng-class="{ 'alterRow': $index === selectedIndex }" dir-paginate=" dados in dados | itemsPerPage : 5">

by

<tr ng-click="itemClicked(dados.id)" ng-class="{'alterRow': selectedIndex == dados.id}" dir-paginate="dados in dados | itemsPerPage : 5">
    
17.11.2016 / 19:46