Best IT Recipes

How to highlight a highlighted line in ngRepeat?

I could not find something to help me solve this simple problem in Angular. All answers are relevant for navigation bars when comparing against the location path.

I built a dynamic table using list and ngRepeat . When I click on a line, I try to assign the selected css class to this line to emphasize the fact that this line was selected by the user and remove .selected from the previously selected line.

I am missing a binding method between the selected string and the CSS class assignment.

I applied each row ( ul ) ng-click="setSelected()" But I do not have enough logic inside the function to apply the changes.

My Code - Plunk

My code is:

 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 (selected class only):

 .selected { background-color: red; }
+47
angularjs angularjs-ng-repeat
Oct. 12 '13 at 7:41
source share
3 answers

Each line has an identifier. All you have to do is send this setSelected() function identifier, save it (for example, in $scope.idSelectedVote ), and then check each line if the selected identifier matches the current one. Here is the solution (see the documentation for ngClass , if necessary):

 $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

+118
Oct 12 '13 at 9:00
source share

You probably want LI, not UL, to have a background color:

 .selected li { background-color: red; }

Then you want to have a dynamic class for UL:

 <ul ng-repeat="vote in votes" ng-click="setSelected()" class="{{selected}}">

Now you need to update $ scope.selected when you press the line:

 $scope.setSelected = function() { console.log("show", arguments, this); this.selected = 'selected'; }

and then deselect the previously highlighted line:

 $scope.setSelected = function() { // console.log("show", arguments, this); if ($scope.lastSelected) { $scope.lastSelected.selected = ''; } this.selected = 'selected'; $scope.lastSelected = this; }

Working solution:

http://plnkr.co/edit/wq6nxc?p=preview

+5
Oct 12 '13 at 9:01
source share

I needed something similar, the ability to click on a set of icons to indicate a choice, or based on text, and update the model (two-way binding) with the presented value, as well as the way for the indication that was selected visually. I created the AngularJS directive for it , because it had to be flexible enough to handle any HTML element that you need to click to indicate the choice.

 <ul ng-repeat="vote in votes" ...> <li data-choice="selected" data-value="vote.id">...</li> </ul>

Solution: http://jsfiddle.net/brandonmilleraz/5fr9V/

+2
Aug 02 '14 at 23:03
source share


More articles:


All Articles