एंगुलरज एनजी-शो एनजी-छुपा ओवरराइड करें: होवर

Question

मेरे पास "आइकन" की श्रृंखला है जो मैं अपने टेम्पलेट में दिखाता हूं।

<div ng-repeat="data in items | orderBy:'-timestamp'"> 
    <div class="icon"> 
     <i>1</i> 
     <span>2</span> 
    </div> 
</div> 

मैं निम्नलिखित सीएसएस दिखाने के लिए span जब .icon पर होवर किया है और i छिपाने है।

.icon:hover i { display: none; } 
.icon:hover span { display: block; } 

हालांकि, मैं भी span जब $scope.options == true के हर एक उदाहरण दिखाने में सक्षम होना चाहता हूँ।

<i ng-hide="options">1</i> 
<span ng-show="options">2</span> 

लेकिन अब, मेरी :hover टूट गया है और span को दिखाई नहीं देता है: तो मैं निम्नलिखित गयी।

क्या ng-show को ओवरराइड करने का कोई तरीका है ताकि मेरा सीएसएस अभी भी display:block होगा जब यह आच्छादित हो?

Answer 1

plunker

आप सीएसएस छोड़ सकते हैं और कोणीय संभाल करते हैं यह एनजी-mouseenter/एनजी-mouseleave का उपयोग कर सकते हैं। फिर or का उपयोग यह दिखाने के लिए करें कि कोई दूसरा चर सही हो।

HTML:

<div ng-repeat="data in items | orderBy:'-timestamp'"> 
    <div ng-mouseenter="options=true" ng-mouseleave="options=false" class="icon"> 
     <i ng-hide="options || checkbox">1</i> 
     <span ng-show="options || checkbox">2</span> 
    </div> 

</div> 
<input type='checkbox' ng-model="checkbox" ng-click="options=!options">Show 

Answer 2

$scope.options मूल्य का उपयोग अपने .icon div में कक्षा जोड़ने के लिए करें, फिर :hover ईवेंट को ओवरराइड करने के लिए एक और विशिष्ट सीएसएस नियम बनाएं।

<div class="icon" ng-class="{ override: $scope.options == true }"> 
    <i ng-hide="options">1</i> 
    <span ng-show="options">2</span> 
</div> 

और अपने सीएसएस में:

.icon.override:hover i { display: block; } 
.icon.override:hover span { display: block; }