Changez la couleur d'arrière-plan lors d'un survol après avoir défini le style en utilisant le style ng

J'ai une liste de mots avec un certain nombre (traînée) attribué à chaque mot. - Je définir la couleur de fond de chaque mot, basé sur le numéro attribué à l'aide d'AngularJS est ng-style.

html

   <ul class="unstyled">
     <li class="tHi" ng-repeat="item in items" ng-click="getEdit(item.word)" ng-style="bgstyle(item.streak)">
       <span>{{item.word}} {{item.streak}}</span>
     </li>
   </ul>

javascript qui est appelée à partir de ng-style.

$scope.bgstyle = function (streak) {
    var red = 255;
    var green = 255-streak;
    var blue = 255-streak;
    var rgb = blue | (green << 8) | (red << 16);
    var sColor = '#' + rgb.toString(16);
    return {backgroundColor: sColor};
}

Cela fonctionne, cependant, je voudrais que l'arrière-plan soit mis en surbrillance lorsque la souris survole un mot. J'ai ajouté une catégorie "tHi" qui, normalement, serait de changer l'arrière-plan sur le vol stationnaire, mais il est remplacé par le style ajouté.

Ici est un jsfiddle qui illustre ce problème.

Est-il une meilleure façon de définir l'arrière-plan de ng-style de sorte qu'il correspond au numéro attribué à chaque mot? Ou est-il un moyen pour mettre en surbrillance lorsque l'utilisateur passe sur un mot?

source d'informationauteur Daniel

  1. 11

    C'est l'un des très rares cas où j'avais fait suggérons d'utiliser !important en CSS:

    .tHi:hover {
    cursor: pointer;
    background-color: #9f9 !important;
}

    Mise à jour JS Fiddle démo.

    À l'aide de la !important mot-clé provoque essentiellement la règle s'applique indépendamment de la spécificité de la sélection (en supposant qu'un plus spécifiques sélecteur de ne pas aussi ont la !important mot-clé, bien sûr). Il necependant, ont le potentiel de faciliter le débogage assez difficile, si vous, ou vos collègues, oubliez l'utilisation de la !important.

    Références:

  2. 9

    Si vous ne souhaitez pas utiliser !importantvous pouvez ajouter la classe dynamiquement à l'aide de ng-passage de la souris:

     <li ng-repeat="item in items" ng-click="getEdit(item.word)" 
    ng-style="bgstyle(item.streak)" ng-mouseover="hover($event)">

    Puis l'ajouter à votre contrôleur:

    $scope.hover = function(e) {
    angular.element(e.srcElement).addClass('tHi')
}

    Manipulation du DOM dans un contrôleur n'est pas "meilleure pratique". Une directive serait mieux.

    Mise à jour: Voici une directive

    myApp.directive('ngHover', function() {
  return {
    link: function(scope, element) {
       element.bind('mouseenter', function() {
          angular.element(element.children()[0]).addClass('tHi')
       })
    }
  }
});

    children()[0] est utilisé pour appliquer de la classe à la plage, pas la li, afin de ne pas entrer en conflit avec la ng-style.

    Utiliser comme suit:

    <li ng-repeat="item in items" ng-click="getEdit(item.word)"
  ng-style="bgstyle(item.streak)" ng-hover>

    Violon

  3. 4

    J'ai trouvé par le biais d'une directive a été le moyen le plus facile.

    App.directive('attr', function(){
    return function(scope, element) {
        element.bind('mouseenter', function(){
            element.addClass('hover');
        }).bind('mouseleave', function(){
          element.removeClass('hover');
        })
    }
})