12

各単語に番号 (ストリーク) が割り当てられた単語のリストがあります。AngularJS の 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>

ng-style から呼び出される JavaScript。

$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};
}

これは機能しますが、マウスを単語の上に置いたときに背景を強調表示したいと思います。通常はホバー時に背景を変更するクラス「tHi」を追加しましたが、追加されたスタイルによってオーバーライドされます。

この問題を示すjsfiddleを次に示します。

各単語に割り当てられた番号に対応するように、ng-style よりも背景を設定する良い方法はありますか? または、ユーザーが単語の上にカーソルを置いたときに強調表示する方法はありますか?

4

3 に答える 3

15

!importantこれは、CSSでの使用を実際に提案する数少ないケースの1つです。

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

JSFiddleデモを更新しました。

キーワードを使用すると、基本的に、セレクターの特異性に関係なくルールが適用されます（もちろん、より具体的なセレクターにもキーワードが!importantないことを前提としています）。ただし、あなたやあなたの同僚がの使用を忘れた場合、デバッグが非常に困難になる可能性があります。!important!important

参照：

于 2012-12-31T20:44:56.523 に答える
10

を使用したくない場合は、 ng-mouseover!importantを使用してクラスを動的に追加できます。

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

次に、コントローラーに追加します。

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

コントローラーで DOM を操作することは、「ベスト プラクティス」ではありません。ディレクティブの方が良いでしょう。

更新：ここにディレクティブがあります

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

children()[0]ng-style と競合しないように、li ではなくスパンにクラスを適用するために使用されます。

次のように使用します。

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

フィドル

于 2012-12-31T21:55:37.083 に答える
4

ディレクティブを使用するのが最も簡単な方法であることがわかりました。

App.directive('attr', function(){
    return function(scope, element) {
        element.bind('mouseenter', function(){
            element.addClass('hover');
        }).bind('mouseleave', function(){
          element.removeClass('hover');
        })
    }
})
于 2013-04-22T01:36:43.183 に答える