Canttouchit Canttouchit - 2 months ago 37
AngularJS Question

How to highlight a selected row in ngRepeat?

I couldn't find something that will help me to solve this simple issue
in Angular. All the answers are relevant for navigation bars when a comparison
is being made against location path.

I've built a dynamic table using list and

ngRepeat
. When I click a row I'm trying to assign this row a css class, selected, to highlight the fact that this row has been selected by user, and remove the
.selected
from previously highlighted row.

I'm missing the method to bind between the row that been selected and the css class assignment.

I applied on each
row
(
ul
)
ng-click="setSelected()"

But I'm missing the logic inside the
function
to apply the changes.

My Code - Plunk

My code:

var webApp = angular.module('webApp', []);

//controllers
webApp.controller ('VotesCtrl', function ($scope, Votes) {
$scope.votes = Votes;
$scope.statuses = ["Approved","Pending","Trash","Spam"];

$scope.setSelected = function() {
console.log("show");

}
});

//services
webApp.factory('Votes', [function() {

//temporary repository till integration with DB this will be translated into restful get query
var votes = [
{
id: '1',
created: 1381583344653,
updated: '222212',
ratingID: '3',
rate: 5,
ip: '198.168.0.0',
status: 'Pending',
},
{
id: '111',
created: 1381583344653,
updated: '222212',
ratingID: '4',
rate: 5,
ip: '198.168.0.1',
status: 'Spam'

},
{
id: '2',
created: 1382387322693,
updated: '222212',
ratingID: '3',
rate: 1,
ip: '198.168.0.2',
status: 'Approved'

},
{

id: '4',
created: 1382387322693,
updated: '222212',
ratingID: '3',
rate: 1,
ip: '198.168.0.3',
status: 'Spam'
}
];

return votes;
}]);


My HTML:

<body ng-controller='VotesCtrl'>
<div>
<ul>
<li class="created">
<a>CREATED</a>
</li>
<li class="ip">
<b>IP ADDRESS</b>
</li>
<li class="status">
<b>STATUS</b>
</li>
</ul>
<ul ng-repeat="vote in votes" ng-click="setSelected()">
<li class="created">
{{vote.created|date}}
</li>
<li class="ip">
{{vote.ip}}
</li>
<li class="status">
{{vote.status}}
</li>
</ul>
</div>
</body>


My CSS (Only selected class):

.selected {
background-color: red;
}

Answer

Each row has an ID. All you have to do is to send this ID to the function setSelected(), store it (in $scope.idSelectedVote for instance), and then check for each row if the selected ID is the same as the current one. Here is a solution (see the documentation for ngClass, if needed):

$scope.idSelectedVote = null;
$scope.setSelected = function (idSelectedVote) {
   $scope.idSelectedVote = idSelectedVote;
};
<ul ng-repeat="vote in votes" ng-click="setSelected(vote.id)" ng-class="{selected: vote.id === idSelectedVote}">
    ...
</ul>

Plunker