एनजी स्तरीय, जहां वर्गों में से एक

Question

मैं इस कोड मिला सशर्त है मल्टीपल क्लासों जोड़ें:

ng-class="{selectedHeader: key == selectedCol}" 

यह काम करता है, लेकिन मैं भी एक वर्ग के रूप में 'कुंजी' मूल्य जोड़ने भी चाहते हैं, Ive की कोशिश की :

ng-class="[{selectedHeader: key == selectedCol}, key]" 

लेकिन यह काम नहीं करेगा, क्या कोई इसे हल करने के बारे में जानता है?

Answer 1

आप हमेशा key चाहते हैं एक वर्ग के रूप में जोड़ा जा करने के लिए:

ng-class="{selectedHeader: key == selectedCol, key: true]" 

या तुम सिर्फ एक class विशेषता में डाल सकते हैं {{}} प्रक्षेप के साथ।

ng-class="{selectedHeader: key == selectedCol}" class="{{key}}" 

बस पूर्णता के लिए, यह selectedCol के बराबर है, तो अगर आप केवल यह शामिल करना चाहते हैं:

ng-class="{selectedHeader: key == selectedCol, key: key == selectedCol}" 

Answer 2

आप इसे द्वारा

ng-class="{selectedHeader: key == selectedCol}" class="{{key}}" 

Answer 3

कर सकते हैं आप $scope तरीकों का उपयोग कर इस संभाल सकता उन गतिशील वर्ग के नामों को परिभाषित करने के लिए। यह कुछ इस तरह दिखेगा:

नियंत्रक:

$scope.selectedCol = 3; 
$scope.key = 3; 

// dynamic ng-class values 
$scope.selectedHeader = function() { 
    if ($scope.selectedCol === $scope.key) 
     return 'header-selected'; 
    else 
     return false; 
}; 

// selected header definition for ng-class 
$scope.headerKey = function() { 
    return 'header-' + $scope.key; 
}; 

दृश्य:

<header ng-class="[ selectedHeader(), headerKey() ]"> 
    <h1>Header element</h1> 
</header> 

परिणाम:

<header ng-class="[ selectedHeader(), headerKey() ]" class="header-selected header-3"> 
     <h1>Header element</h1> 
</header> 

Answer 4

मुझे लगता है कि आप जो खोज रहे हैं वह है: ng-class="{ {{key}}:{{key}} }"

यह भी ध्यान रखें कि सीएसएस कक्षाएं किसी संख्या से शुरू नहीं होनी चाहिए, इसलिए आपको अपने मुख्य मूल्य को उपसर्ग करने की आवश्यकता हो सकती है।

Answer 5

इस प्रयास करें:

class="{{key}} ng-class:{'selectedHeader': key == selectedCol}; 

Answer 6

यह काम नहीं करेगा क्योंकि {selectedHeader: कुंजी == selectedCol} स्ट्रिंग के रूप एक वस्तु के रूप में मूल्यांकन किया जाएगा और नहीं:

ng-class="[{selectedHeader: key == selectedCol}, key]" 

निम्नलिखित कोड काम , यह वर्ग 'चयनित हैडर' और कुंजी का मूल्य जोड़ देगा:

ng-class="[key == selectedCol ? 'selectedHeader' : '', key]" 

Answer 7

// single class 
 
<div ng-class="{'myclass' : condition}"> 
 
</div> 
 
    
 
// multiple class 
 
<div ng-class="{'myclass1': condition1, 'myclass2': condition2}"> 
 
some content 
 
</div>