AngularJS
एनजी-क्लास निर्देश

तीन प्रकार के एनजी-क्लास अभिव्यक्ति

कोणीय ng-class निर्देशन में कोणीय तीन प्रकार के भावों का समर्थन करता है।

1. स्ट्रिंग

<span ng-class="MyClass">Sample Text</span>

एक स्ट्रिंग का मूल्यांकन करने वाली अभिव्यक्ति को निर्दिष्ट करना, कोणीय को एक $ गुंजाइश चर के रूप में व्यवहार करने के लिए कहता है। कोणीय $ गुंजाइश की जाँच करेगा और "MyClass" नामक एक चर की तलाश करेगा। जो भी पाठ "MyClass" में निहित है वह वास्तविक वर्ग नाम बन जाएगा जो इस <span> लागू होता है। आप प्रत्येक वर्ग को एक स्थान से अलग करके कई कक्षाएं निर्दिष्ट कर सकते हैं।

आपके नियंत्रक में, आपकी परिभाषा इस प्रकार दिखती है:

$scope.MyClass = "bold-red deleted error";

कोणीय अभिव्यक्ति MyClass मूल्यांकन करेगा और $ गुंजाइश परिभाषा प्राप्त करेगा। यह तीन वर्गों "बोल्ड-रेड", "हटाए गए" और "त्रुटि" को <span> तत्व पर लागू करेगा।

इस तरह से कक्षाएं निर्दिष्ट करने से आप अपने नियंत्रक में वर्ग परिभाषाओं को आसानी से बदल सकते हैं। उदाहरण के लिए, आपको अन्य उपयोगकर्ता इंटरैक्शन या सर्वर से लोड किए गए नए डेटा के आधार पर वर्ग को बदलने की आवश्यकता हो सकती है। इसके अलावा, यदि आपके पास मूल्यांकन करने के लिए बहुत सारे भाव हैं, तो आप एक फ़ंक्शन में ऐसा कर सकते हैं जो एक $scope चर में वर्गों की अंतिम सूची को परिभाषित करता है। यह आपके एचटीएमएल टेम्पलेट में ng-class विशेषता में कई मूल्यांकन निचोड़ने की कोशिश करने से आसान हो सकता है।

2. वस्तु

यह ng-class का उपयोग करके कक्षाओं को परिभाषित करने का सबसे अधिक उपयोग किया जाने वाला तरीका है क्योंकि यह आपको आसानी से मूल्यांकन निर्दिष्ट करने देता है जो निर्धारित करता है कि किस वर्ग का उपयोग करना है।

मुख्य-मूल्य जोड़े वाली एक वस्तु निर्दिष्ट करें। कुंजी वर्ग नाम है जिसे लागू किया जाएगा यदि मान (एक सशर्त) सही के रूप में मूल्यांकन करता है।

<style>
    .red { color: red; font-weight: bold; }
    .blue { color: blue; }
    .green { color: green; }
    .highlighted { background-color: yellow; color: black; }
</style>

<span ng-class="{ red: ShowRed, blue: ShowBlue, green: ShowGreen, highlighted: IsHighlighted }">Sample Text</span>

<div>Red: <input type="checkbox" ng-model="ShowRed"></div>
<div>Green: <input type="checkbox" ng-model="ShowGreen"></div>
<div>Blue: <input type="checkbox" ng-model="ShowBlue"></div>
<div>Highlight: <input type="checkbox" ng-model="IsHighlighted"></div>

3. अर्रे

एक सरणी का मूल्यांकन करने वाली अभिव्यक्ति आपको स्ट्रिंग्स (# 1 ऊपर देखें) और सशर्त ऑब्जेक्ट्स (# 2 ऊपर) के संयोजन का उपयोग करने देती है।

<style>
    .bold { font-weight: bold; }
    .strike { text-decoration: line-through; }
    .orange { color: orange; }
</style>

<p ng-class="[ UserStyle, {orange: warning} ]">Array of Both Expression Types</p>
<input ng-model="UserStyle" placeholder="Type 'bold' and/or 'strike'"><br>
<label><input type="checkbox" ng-model="warning"> warning (apply "orange" class)</label>

यह एक टेक्स्ट इनपुट क्षेत्र बनाता है जो स्कोप वैरिएबल UserStyle जो उपयोगकर्ता को किसी भी वर्ग के नाम (प्रकारों) में टाइप करने देता है। ये उपयोगकर्ता प्रकारों के रूप में गतिशील रूप से <p> तत्व पर लागू होंगे। इसके अलावा, उपयोगकर्ता चेकबॉक्स पर क्लिक कर सकता है जो warning गुंजाइश चर के लिए डेटा-बाउंड है। यह गतिशील रूप से <p> तत्व पर भी लागू होगा।