web-dev-qa-db-fra.com

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

Je ne pouvais pas trouver 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 un tableau dynamique en utilisant list et ngRepeat. Lorsque je clique sur une ligne, j'essaie d'attribuer à 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 surbrillance.

Il me manque la méthode pour faire le lien entre la ligne sélectionnée et l’affectation de classe css.

J'ai appliqué sur chaque row (ul) ng-click="setSelected()" mais il me manque la logique à l'intérieur de 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: 

  <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>

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

.selected {
  background-color: red;
}
angularjsangularjs-ng-repeat
55
Canttouchit

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

$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

132
Blackhole

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

.selected li {
  background-color: red;
}

Ensuite, vous voulez avoir une classe dynamique pour l'UL:

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

Maintenant, vous devez mettre à jour le fichier $ 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 surbrillance:

$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

6
user508994

J'avais besoin de quelque chose de similaire, la possibilité de cliquer sur un ensemble d'icônes pour indiquer un choix, ou un choix basé sur le texte et de mettre à jour le modèle (liaison bidirectionnelle) avec la valeur représentée et d'indiquer également le choix. a été sélectionné visuellement. I créé une directive AngularJS , car il devait être suffisamment souple pour gérer tout élément HTML sur lequel l'utilisateur avait cliqué pour indiquer un choix.

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

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

3
LightningEater