2014-12-09 45 views
12

AngularJS düğmesini kullanarak düğmeyi istediğiniz zaman bir düğüme bir sınıf (mavi) eklemeye çalışıyorum.Açısal JS Değişken Sınıfı değiştir

HTML

<button class="btn-add-optimize" ng-mouseover="hover(iets)">Add and Optimize</button> 

angularjs

$scope.hover = function (iets) { 
    var Dit = this; 
    Dit.add("blue"); 
}; 

Herkes bana yardımcı olabilir? Küçük bir örnek tercih edilebilir, çok takdir edilecektir!

+2

Neden sadece css kullanmak? .btn-add-optimize: hover {renk: mavi;} – Blue

+0

Ben de css kullanarak tavsiye ederim. Bu işlevsellik için açısal kullanım en üste gidiyor. – gsalisi

+0

Teşekkürler Mavi, ben senin çözümünü kullanarak bitiyorum :) – Staafsak

cevap

31

Ben başarı ile böyle bir şey kullandım:

<button 
    ng-class="{'some-class':hovering}" 
    ng-mouseenter="hovering=true" 
    ng-mouseleave="hovering=false">Add and Optimize</button> 

girdikten ve düğmeyi bırakarak $scope.hovering geçiş yapar ve some-class uygulanması $scope.hovering kapsamı değişken true olması şartına bağlı olmasını.

+2

CSS kullanarak: hover sözde özniteliği çoğu durum için çalışmalıdır, ancak sayfanın diğer davranışlarını da tetiklemek için kullanmak istiyorsanız, bu güzel çalışacaktır. –

+0

Bunun için bir yönerge yazmam gerekiyordu, benim durumumda, temelde tekrarlayan tüm kart beğenme elemanlarında yapıyordum. https://github.com/guilhermegeek/pi-angular-class-hover –

12
<button 
ng-class="{'some-class':hovering}" 
ng-mouseenter="hovering=true" 
ng-mouseleave="hovering=false">Add and Optimize</button> 
Bu formu kullanmalıdır

: ng sınıf

+1

, sadece sizin üzerinde aynı cevabı kullandığınız zaman, insanların size 9 oy vermesini neden anlayamıyorsunuz. – msqar

+0

@msqar O zaman, Ercan'ın cevabı teknik olarak doğruydu ve Collin'in bir hata içermesi, aksi takdirde doğru ve aynı olsa bile. Söz konusu hatayı çözmek için [düzenle] (http://stackoverflow.com/review/suggested-edits/12755495) incelemekte çekinmeyin. –