Comment mettre en évidence une ligne sélectionnée dans ngRepeat?

Je n’ai pas trouvé quelque chose qui m’aiderait à résoudre ce problème simple dans Angular. Toutes les réponses sont pertinentes pour les barres de navigation lorsqu’une comparaison est effectuée avec le chemin de localisation.

J’ai construit une table dynamic en utilisant list et ngRepeat . Lorsque je clique sur une ligne, j’essaie d’atsortingbuer à cette ligne une classe CSS, sélectionnée, pour mettre en évidence le fait que cette ligne a été sélectionnée par l’utilisateur et supprimer le .selected de la ligne précédemment mise en évidence.

Il me manque la méthode pour lier la ligne sélectionnée et l’atsortingbution de classe css.

J’ai appliqué sur chaque row ( ul ) ng-click="setSelected()" Mais je manque la logique à l’intérieur de la function pour appliquer les modifications.

Mon code – Plunk

Mon 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; }]); 

Mon HTML:

   
  • {{vote.created|date}}
  • {{vote.ip}}
  • {{vote.status}}

Mon CSS (classe sélectionnée uniquement):

 .selected { background-color: red; } 

Chaque ligne a un identifiant. Tout ce que vous avez à faire est d’envoyer cet ID à la fonction setSelected() , de le stocker (dans $scope.idSelectedVote par exemple), puis de vérifier chaque ligne si l’ID sélectionné est identique à celui en cours. Voici une solution (voir la documentation de ngClass , si nécessaire):

 $scope.idSelectedVote = null; $scope.setSelected = function (idSelectedVote) { $scope.idSelectedVote = idSelectedVote; }; 
 
    ...

Plunker

Vous voulez probablement que LI plutôt que l’UL ait la couleur de fond:

 .selected li { background-color: red; } 

Ensuite, vous voulez avoir une classe dynamic pour l’UL:

 

    Maintenant, vous devez mettre à jour $ scope.selected lorsque vous cliquez sur la ligne:

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

    puis désélectionnez la ligne précédemment mise en évidence:

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

    Solution de travail:

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

    J’avais besoin de quelque chose de similaire, la possibilité de cliquer sur un ensemble d’icons pour indiquer un choix, ou un choix basé sur du texte et de mettre à jour le modèle (reliure bidirectionnelle) avec la valeur représentée et aussi a été sélectionné visuellement. J’ai créé une directive AngularJS , car celle-ci devait être suffisamment flexible pour gérer tout élément HTML sur lequel on cliquait pour indiquer un choix.

     
    • ...

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