AngularJS ngClass सशर्त

Question

क्या ng-classसशर्त होने के लिए किसी चीज़ की अभिव्यक्ति करने का कोई तरीका है ?

उदाहरण के लिए, मैंने निम्नलिखित कोशिश की है:

<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span>

इस कोड के साथ मुद्दा यह है कि कोई भी बात नहीं obj.value1है, वर्ग परीक्षण हमेशा तत्व पर लागू होता है। यह कर रहा हूं:

<span ng-class="{test: obj.value2}">test</span>

जब तक obj.value2एक सत्य मूल्य के बराबर नहीं होता है, तब तक वर्ग लागू नहीं होता है। अब मैं इस मुद्दे पर पहले उदाहरण में काम कर सकता हूं:

<span ng-class="{test: checkValue1()}">test</span>

जहां checkValue1फ़ंक्शन इस तरह दिखता है:

$scope.checkValue1 = function() {
  return $scope.obj.value === 'somevalue';
}

मैं बस सोच रहा हूँ कि यह कैसे ng-classकाम करने वाला है। मैं एक कस्टम निर्देश भी बना रहा हूं, जहां मैं कुछ इसी तरह करना चाहता हूं। हालाँकि, मुझे अभिव्यक्ति देखने का कोई तरीका नहीं मिल रहा है (और शायद यह असंभव है और इसी वजह से यह इस तरह काम करता है)।

यहाँ मेरा क्या मतलब है दिखाने के लिए एक plnkr है।

Comments

इस उत्तर पर एक नज़र डालें: stackoverflow.com/questions/14788652/…

— एड्रियन नीटू

डैश के साथ वर्गों को उद्धृत करने की आवश्यकता है:ng-class="'label-success': obj.value1 == 'Ready', 'label-warning': obj.value1 == 'On hold'}"

— ब्रेंट वॉशबर्न 20

हम एनजी श्रेणी के साथ और अधिक शर्त का उपयोग कर सकते हैं, इस ब्लॉग पर देख goo.gl/qfEQZw

— वीरेंद्र

सम्बंधित: stackoverflow.com/q/7792652/435605

— AlikElzin-kilaka

"डैश वाली कक्षाओं को लैश की आवश्यकता होती है" '' '' '' ''

— रिकार्ड

Answer 1

आपका पहला प्रयास लगभग सही था, यह उद्धरण के बिना काम करना चाहिए।

{test: obj.value1 == 'someothervalue'}

यहाँ एक plnkr है ।

एनक्लेकस निर्देश किसी भी अभिव्यक्ति के साथ काम करेगा जो सच्चाई या गलत का मूल्यांकन करता है, जो जावास्क्रिप्ट अभिव्यक्तियों के समान है, लेकिन कुछ अंतरों के साथ, आप यहां पढ़ सकते हैं । यदि आपकी स्थिति बहुत जटिल है, तो आप एक ऐसे फ़ंक्शन का उपयोग कर सकते हैं जो सत्य या गलत रिटर्न देता है, जैसा कि आपने अपने तीसरे प्रयास में किया था।

बस पूरक करने के लिए: आप तार्किक भावों को बनाने के लिए तार्किक संचालकों का भी उपयोग कर सकते हैं जैसे

ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"

Comments

धन्यवाद, जो भी कारण के लिए, मैं हालांकि यह है कि क्योंकि यह एक अभिव्यक्ति थी वस्तु के मूल्य के रूप में, पूरी बात उद्धरणों में होनी थी।

— रैनजेक

'यदि आप अधिक कक्षाएं जोड़ना चाहते हैं या यदि आपकी कक्षा में हाइफ़न या अंडरस्कोर है तो यह काम नहीं करेगा तो कक्षा का नाम लपेटें । ng-class="{'test test-2: obj.value1 === 'value'}"

— एंड्रिया तुरी

@ और, आप समापन उद्धरण भूल गए: ng-class="{'test test-2': obj.value1 === 'value'}"

— ErikE

Angular2 के लिए (जो मैं खोजने की कोशिश कर रहा था) विशेषता का उपयोग करें: जैसे [class.test]="obj.value1 == 'someotervalue'"।

— kub1x

पाठकों के लिए FYI करें, आपके पास कोष्ठक भी हो सकते हैं। ng-class="{danger:!enabled || (type === 'WHEEL' && !isOnline) }

— दाकोडा

Answer 2

एनजी-रिपीट के अंदर एनजी-क्लास का उपयोग करना

<table>
    <tbody>
            <tr ng-repeat="task in todos"
                ng-class="{'warning': task.status == 'Hold' , 'success': task.status == 'Completed',
              'active': task.status == 'Started', 'danger': task.status == 'Pending' } ">
                <td>{{$index + 1}}</td>
                <td>{{task.name}}</td>
                <td>{{task.date|date:'yyyy-MM-dd'}}</td>
                <td>{{task.status}}</td>
            </tr>
    </tbody>
</table>

कार्य में प्रत्येक स्थिति के लिए। पंक्ति के लिए एक अलग वर्ग का उपयोग किया जाता है।

Comments

कई वर्गों के साथ सही उदाहरण, धन्यवाद!

— श्रीकांत कारिणी

Answer 3

कोणीय जेएस इस कार्यक्षमता को एनजी-क्लास डायरेक्टिव में प्रदान करते हैं । जिसमें आप कंडीशन डाल सकते हैं और सशर्त क्लास भी असाइन कर सकते हैं। आप इसे दो अलग-अलग तरीकों से हासिल कर सकते हैं।

श्रेणी 1

<div ng-class="{0:'one', 1:'two',2:'three'}[status]"></div>

इस कोड में क्लास को स्टेटस वैल्यू के हिसाब से लागू किया जाएगा

यदि स्थिति मान 0 है तो कक्षा एक लागू करें

यदि स्थिति मान 1 है तो कक्षा लागू करें दो

यदि स्थिति मान 2 है तो कक्षा तीन लागू करें

---

टाइप 2

<div ng-class="{1:'test_yes', 0:'test_no'}[status]"></div>

किस क्लास में किस स्टेटस के मान से आवेदन किया जाएगा

यदि स्थिति मान 1 या सत्य है तो यह वर्ग test_yes को जोड़ेगा

यदि स्थिति मान 0 या गलत है, तो यह वर्ग test_no जोड़ देगा

Comments

यहाँ क्या स्थिति है?

— CommonSenseCode

स्थिति वह मूल्य है जिसे आप जाँचना या मान्य करना चाहते हैं कि कौन सी कक्षा लागू होगी।

— कौशल खामर

इस तरह जैसे कि यह कई मूल्यों से निपटने के दौरान अधिक लचीला और कम पागल है

— एडुआर्डो ला होज मिरांडा

कैसे कई वर्गों के लिए इसका उपयोग करने के बारे में। जैसे, <div ng-class = "{0: 'एक', 1: 'दो', 2: 'तीन'} [स्थिति], {0: 'एक', 1: 'दो'} [स्थिति 1]"> </ div>

— parth.hirpara

क्या हम इस तरह के मामले में इसका इस्तेमाल कर सकते हैं: <div ng-class="{'Image' || 'image': 'image-icon', 'Video' || 'video' || 'aVideo' || 'bVideo' : 'video-icon'}[resource.type]"></div>

— चंद्र कांत पालीवाल

Answer 4

मैं ऊपर महान उदाहरण देखता हूं लेकिन वे सभी घुंघराले कोष्ठक (json मानचित्र) के साथ शुरू होते हैं। एक अन्य विकल्प संगणना के आधार पर परिणाम लौटाना है। परिणाम सीएसएस श्रेणी के नामों (सिर्फ मानचित्र नहीं) की एक सूची भी हो सकती है। उदाहरण:

ng-class="(status=='active') ? 'enabled' : 'disabled'"

या

ng-class="(status=='active') ? ['enabled'] : ['disabled', 'alik']"

स्पष्टीकरण: यदि स्थिति सक्रिय है, तो कक्षा enabledका उपयोग किया जाएगा। अन्यथा, कक्षा disabledका उपयोग किया जाएगा।

सूची []का उपयोग कई वर्गों (केवल एक नहीं) के लिए किया जाता है।

Comments

लवली, सभी अद्भुत उदाहरण हैं, लेकिन मुझे तुम्हारा सबसे ज्यादा पसंद है!

— तूफान ५६

Answer 5

एक सरल विधि है जिसे आप html वर्ग विशेषता और आशुलिपि के साथ उपयोग कर सकते हैं यदि / और। इसे इतना जटिल बनाने की आवश्यकता नहीं है। बस निम्नलिखित विधि का उपयोग करें।

<div class="{{expression == true ? 'class_if_expression_true' : 'class_if_expression_false' }}">Your Content</div>

हैप्पी कोडिंग, निमंथा परेरा

Comments

यह आदमी पा लेता है। धन्यवाद कली

— गहराती है

Answer 6

मैं आपको दो विधियाँ दिखाने जा रहा हूँ जिसके द्वारा आप गतिशील रूप से एनजी-क्लास लगा सकते हैं

चरण 1

टर्नरी ऑपरेटर का उपयोग करके

<div ng-class="condition?'class1':'class2'"></div>

उत्पादन

यदि आपकी स्थिति सही है, तो class1 को आपके तत्व पर लागू किया जाएगा अन्यथा class2 लागू किया जाएगा।

हानि

जब आप रन टाइम पर सशर्त मूल्य को बदलने की कोशिश करेंगे तो क्लास किसी तरह नहीं बदलेगी। इसलिए मैं आपको चरण 2 के लिए जाने का सुझाव दूंगा यदि आपके पास गतिशील वर्ग परिवर्तन जैसी आवश्यकता है।

चरण 2

<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>

उत्पादन

यदि आपकी स्थिति value1 के साथ मेल खाती है, तो class1 आपके तत्व पर लागू होगा, यदि value2 के साथ मैच होता है, तो class2 को लागू किया जाएगा और इसी तरह। और गतिशील वर्ग परिवर्तन इसके साथ ठीक काम करेगा।

आशा है कि यह आपकी मदद करेगा।

Answer 7

कोणीय सिंटैक्स का उपयोग करना है : ऑपरेटर अगर एक संशोधक के बराबर प्रदर्शन करने के लिए

<div ng-class="{ 'clearfix' : (row % 2) == 0 }">

यहां तक ​​कि पंक्तियों में स्पष्ट वर्ग जोड़ें। बहरहाल, अभिव्यक्ति कुछ भी हो सकती है अगर हम सामान्य स्थिति में हो सकते हैं और इसका मूल्यांकन सही या गलत होना चाहिए।

Comments

अच्छा! इसके अलावा, एनजी-रिपीट के अंदर आप क्लास सेट करने के लिए भी $ का उपयोग कर सकते हैं। जैसे- एनजी-क्लास = "$ सम? 'भी': 'विषम'"। एनजी-रिपीट के अंदर अन्य निफ्टी बूल $ पहले, $ अंतिम, $ सम, $ विषम हैं ...

— मैक्स

Answer 8

एनजी-क्लास के साथ फ़ंक्शन का उपयोग करना एक अच्छा विकल्प है जब किसी को उपयुक्त सीएसएस वर्ग का निर्णय करने के लिए जटिल तर्क चलाना पड़ता है।

http://jsfiddle.net/ms403Ly8/2/

HTML:

<div ng-app>
  <div ng-controller="testCtrl">
        <div ng-class="getCSSClass()">Testing ng-class using function</div>       
    </div>
</div>

सीएसएस:

.testclass { Background: lightBlue}

जावास्क्रिप्ट :

function testCtrl($scope) {
    $scope.getCSSClass = function() {
     return "testclass ";
  }     
}

Comments

मुझे लगता है कि यह चिंताओं को मिलाता है। एक नियंत्रक को अधिक सार होना चाहिए और सीएसएस कक्षाओं की परवाह नहीं करना चाहिए, बल्कि राज्य। राज्य के आधार पर, सीएसएस कक्षाओं को टेम्पलेट में लागू किया जाना चाहिए। इस तरह नियंत्रक टेम्पलेट से स्वतंत्र है और पुन: प्रयोज्य आसान है।

— ह्यूबर्ट ग्रेज्सकोविआक

Answer 9

इसे इस्तेमाल करो

<div ng-class="{states}[condition]"></div>

उदाहरण के लिए यदि स्थिति [2 == 2] है, तो राज्य {सत्य: '...', असत्य: '...'} हैं

<div ng-class="{true: 'ClassA', false: 'ClassB'}[condition]"></div>

Comments

लेकिन अगर मेरे पास 3 या अधिक शर्तें हैं, तो यह काम नहीं करेगा? चूँकि यह केवल सच्चे और झूठे संघटन लौटाएगा

— अली अल अमीन

स्थितियों का अर्थ है सच या गलत। आप 2 से अधिक मूल्यों के साथ कुछ मतलब है ?? @AlyAlAmeen

— सईद

Answer 10

कोणीय 2 के लिए, इसका उपयोग करें

<div [ngClass]="{'active': dashboardComponent.selected_menu == 'mapview'}">Content</div>

Comments

इस पर विस्तार करने के लिए, कोणीय 2 के लिए आप एक वर्ग और एक वर्ग संशोधक को भी लागू करते हैं जैसे कि / if सशर्त एक सरणी का उपयोग करते हुए जैसे:[ngClass]="['base-class', thread.isActive ? 'base-class--active' : '']"

— मैट रब

Answer 11

ng-classकोर AngularJs का एक निर्देश है। जिसमें आप "स्ट्रिंग सिंटैक्स", "एरे सिंटैक्स", "इवैल्युएटेड एक्सप्रेशन", "टर्नेरी ऑपरेटर" और नीचे वर्णित कई और विकल्पों का उपयोग कर सकते हैं:

स्ट्रिंग सिंटैक्स का उपयोग करना

यह ngClass का उपयोग करने का सबसे सरल तरीका है। आप एनजी-वर्ग में केवल एक कोणीय चर जोड़ सकते हैं और यह वह वर्ग है जो उस तत्व के लिए उपयोग किया जाएगा।

<!-- whatever is typed into this input will be used as the class for the div below -->
<input type="text" ng-model="textType">

<!-- the class will be whatever is typed into the input box above -->
<div ng-class="textType">Look! I'm Words!

स्ट्रिंग सिंटैक्स का उपयोग करते हुए एनक्लेक्लेस का डेमो उदाहरण

ngClass Array सिंटैक्स का उपयोग करना

यह स्ट्रिंग सिंटैक्स विधि के समान है सिवाय इसके कि आप कई कक्षाएं लागू करने में सक्षम हैं।

<!-- both input boxes below will be classes for the div -->
<input type="text" ng-model="styleOne">
<input type="text" ng-model="styleTwo">

<!-- this div will take on both classes from above -->
<div ng-class="[styleOne, styleTwo]">Look! I'm Words!

ngClass का उपयोग कर मूल्यांकन अभिव्यक्ति

NgClass (और एक है कि आप शायद सबसे अधिक उपयोग करेगा) का उपयोग करने का एक और अधिक उन्नत तरीका एक अभिव्यक्ति का मूल्यांकन करना है। जिस तरह से यह काम करता है कि यदि कोई चर या अभिव्यक्ति का मूल्यांकन करता है true, तो आप एक निश्चित वर्ग को लागू कर सकते हैं। यदि नहीं, तो वर्ग लागू नहीं किया जाएगा।

<!-- input box to toggle a variable to true or false -->
<input type="checkbox" ng-model="awesome"> Are You Awesome?
<input type="checkbox" ng-model="giant"> Are You a Giant?

<!-- add the class 'text-success' if the variable 'awesome' is true -->
<div ng-class="{ 'text-success': awesome, 'text-large': giant }">

मूल्यांकन किए गए अभिव्यक्ति का उपयोग करते हुए ngClass का उदाहरण

ngClass मान का उपयोग करना

यह केवल आपके चर के साथ कई मानों की तुलना करने में सक्षम होने के अलावा मूल्यांकित अभिव्यक्ति पद्धति के समान है।

<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>

ngClass टर्नररी ऑपरेटर का उपयोग करना

टर्नेरी ऑपरेटर हमें दो अलग-अलग वर्गों को निर्दिष्ट करने के लिए शॉर्टहैंड का उपयोग करने की अनुमति देता है, एक अगर अभिव्यक्ति सही है और एक झूठी है। यहाँ टेनेरी ऑपरेटर के लिए मूल सिंटैक्स है:

ng-class="$variableToEvaluate ? 'class-if-true' : 'class-if-false'">

पहले, अंतिम या विशिष्ट संख्या का मूल्यांकन

आप उपयोग कर रहे हैं ngRepeatके निर्देश और आप के लिए कक्षाएं लागू करना चाहते हैं first, lastया किसी विशिष्ट सूची में नंबर, आप में से विशेष गुण का उपयोग कर सकते ngRepeat। इनमें शामिल हैं $first, $last, $even, $odd, और कुछ अन्य। इनका उपयोग कैसे करें, इसका एक उदाहरण यहां दिया गया है।

<!-- add a class to the first item -->
<ul>
  <li ng-class="{ 'text-success': $first }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

<!-- add a class to the last item -->
<ul>
  <li ng-class="{ 'text-danger': $last }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

<!-- add a class to the even items and a different class to the odd items -->
<ul>
  <li ng-class="{ 'text-info': $even, 'text-danger': $odd }" ng-repeat="item in items">{{ item.name }}</li>
</ul>