AngularJS - 無法刪除另一個樣式添加點擊後的懸停樣式

我正在學習角度，並試圖創建一個簡單的界面，用戶可以點擊一個元素（超出可能3）和一些css應用。當用戶將鼠標懸停在元素上時，會應用另一個影響。我目前的問題是：

1.我達到了所需的功能，但我覺得這是「不是角度的方式」，而是看起來像一個黑客。
2.一旦用戶懸停一個元素並選擇它，我不知道如何禁用該元素的懸停效果。AngularJS - 無法刪除另一個樣式添加點擊後的懸停樣式

JSfiddle here，請指教。

HTML：

<div ng-app='myApp'> 
    <div ng-controller='myController'> 
<div class="row"> 
    <div class="col-lg-12 col-md-12 col-sm-12"> 
     <div class="row"> 
     <div class="col-lg-4 col-md-4 statTab" id="1" ng-click="toggleSelected($event)" ng-class="{'statNumberActive' : toggle1}"> 
      <span class="statNumber">0</span> 
      <span class="statDescription">Views</span> 
     </div> 
     <div class="col-lg-4 col-md-4 statTab" id="2" ng-click="toggleSelected($event)" ng-class="{'statNumberActive' : toggle2}"> 
      <span class="statNumber">0</span> 
      <span class="statDescription">Reads</span> 
     </div> 
     <div class="col-lg-4 col-md-4 statTab" id="3" ng-click="toggleSelected($event)" ng-class="{'statNumberActive' : toggle3}"> 
      <span class="statNumber">0</span> 
      <span class="statDescription">Commens</span> 
     </div> 
     </div> 
    </div> 
    </div> 
    </div> 
</div>

JS：

var myApplication = angular.module('myApp', []); 

myApplication.controller('myController', ['$scope', function($scope) { 
    $scope.toggleSelected = function(item) { 
    var id = item.currentTarget.id; 
    switch (id) { 
     case "1": 
     $scope.toggle1 = true; 
     $scope.toggle2 = false; 
     $scope.toggle3 = false; 
     break; 
     case "2": 
     $scope.toggle1 = false; 
     $scope.toggle2 = true; 
     $scope.toggle3 = false; 
     break; 
     case "3": 
     $scope.toggle1 = false; 
     $scope.toggle2 = false; 
     $scope.toggle3 = true; 
     break; 
    } 
    } 
}]);

CSS：

.statNumberActive { 
    color: rgba(0, 0, 0, .8) !important; 
    border-bottom: none !important; 
} 

.statNumber { 
    font-weight: 700; 
    font-style: normal; 
    font-size: 50px; 
    display: block; 
    line-height: 40px; 
    height: 40px; 
    margin-bottom: 5px; 
    letter-spacing: -.04em; 
    transition: all ease .3s; 
} 

.statDescription { 
    color: rgba(109, 109, 109, 0.3); 
    font-size: 18px; 
    transition: all ease .3s; 
    font-weight: bold; 
} 

.statTab { 
    height: 76px; 
    border-bottom: 1px solid rgba(0, 0, 0, .3); 
    color: rgba(109, 109, 109, 0.3); 
    transition: all ease .3s; 
} 

.statTab span { 
    padding-left: 10px; 
} 

.statTab:hover > span { 
    color: rgba(49, 49, 49, 0.47); 
}

來源

2016-03-15 undroid

看來你輸入了錯誤的小提琴。它是關於在控制器內使用過濾器的示例。 – morels

謝謝，更正了鏈接。 – undroid

與你的問題沒有關係，但仍然是：儘量不寫「$ scope.someproperty = value」。通常你應該引用控制器的屬性，並通過控制器的實例引用這個屬性，如「mycontroller.someproperty」 –

我已經更新了小提琴請JsFiddle

.addHover：hover> span { color：rgba（49，49，49，0.47）; }

在納克級的我已經更新了這個

<div class="col-lg-4 col-md-4 statTab addHover" id="2" ng-click="toggleSelected($event)" ng-class="{'statNumberActive' : toggle2,'addHover':!toggle2}">

現在所選擇的項目懸停不會發生

來源

2016-03-15 15:41:56 optimus

@undroid，這是否解決了你的問題 – optimus

它主要是。但我相信我用'switch'語句的做法並不十分有效，有沒有更好的方法來實現這一點？ – undroid

@undroid：不確定你的應用程序需求，但是如果我們使用ng-repeat來構建dom，請參閱http://jsfiddle.net/dcodesmith/3G7Kd/，這應該爲你提供一個主意 – optimus

AngularJS - 無法刪除另一個樣式添加點擊後的懸停樣式

回答

相關問題