एनजी-क्लास का उपयोग करके कई वर्ग जोड़ना

Question

क्या हम कई एनजी-क्लास जोड़ने के लिए कई अभिव्यक्ति कर सकते हैं?

उदाहरण के लिए।

<div ng-class="{class1: expressionData1, class2: expressionData2}"></div>

यदि हाँ, तो कोई भी ऐसा करने के लिए उदाहरण प्रस्तुत कर सकता है।

।

Comments

आपका उदाहरण के रूप में काम करता है।

— स्टीव क्लोस्टर्स

हाँ यह करता है, मैं बस का उपयोग करने के लिए महत्वपूर्ण था! मैंने इसे खुद से पाया :)

— आदित्य सेठी

@Stevuu ने क्या कहा .. ri8 है ... उर सवाल का जवाब है

— YaswanthJg

क्या मूल्य अभिव्यक्तिData1 आमतौर पर सही / गलत है, या कुछ वास्तव में स्ट्रिंग मूल्य लेता है?

— मार्तंड 2049

Answer 1

अलग-अलग वर्गों को लागू करने के लिए जब अलग-अलग अभिव्यक्तियाँ मूल्यांकन करती हैं true:

<div ng-class="{class1 : expression1, class2 : expression2}">
    Hello World!
</div>

एक अभिव्यक्ति के सही होने पर कई कक्षाएं लागू करने के लिए:

<!-- notice expression1 used twice -->
<div ng-class="{class1 : expression1, class2 : expression1}">
    Hello World!
</div>

या बिल्कुल सरल:

<div ng-class="{'class1 class2' : expression1}">
    Hello World!
</div>

सीएसएस कक्षाओं के आसपास के एकल उद्धरणों पर ध्यान दें।

Comments

आप एनजी-क्लास = "{'क्लास 1 क्लास 2': एक्सप्रेशन 1} जैसे कई क्लास पास नहीं कर सकते हैं। सिर्फ इतना ही टेस्ट करें और उस पर काम न करें, समाधान के रूप में @ कोडहेटर ने कहा" एक एक्सप्रेशन के सही होने पर कई क्लास लगाने के लिए: " चाल

— d1jhoni1b

1.2.16 में मल्टी-क्लास विकल्प ( 'class1 class2': expression) ठीक काम करने लगता है, सिवाय इसके कि यदि आप एक क्लास का पुनः उपयोग करते हैं तो विकल्प के बीच टॉगल होने पर इसे गिरा दिया जाता है। जैसे कि 'commonClass class1': expression == true, 'commonClass class2': expression == falseआम क्लैक्सेस को खो दिया जाता है, क्योंकि यह सत्य और असत्य के बीच की अभिव्यक्ति है।

— ब्रायनएस

@ ब्रायन मैं कुछ इस तरह से class="commonClass" ng-class={'class1' : expression, 'class2' : !expression}

— करूंगा

@ कोडहैटर धन्यवाद। यह बहुत ज्यादा है जो मैं अभी योजना बना रहा हूं, बस सीएसएस को ठीक करने के लिए कुछ समय चाहिए।

— ब्रायनएस

है ng-class="{'class1' : expression1, 'class2':expression1 }"संभव? क्या आप मेरे प्रश्न को देख रहे हैं: stackoverflow.com/questions/25391692/…

— Danger14

Answer 2

सहायक ऑपरेटर संकेतन के लिए:

<div ng-class="expression1? 'class1 class2' : 'class3 class4'">

Comments

यह एक मेरे लिए काम नहीं करता है। <span ng-class = "params.isAdmin? 'fa fa-lock fa-2x': 'fa fa-unlock fa fa-2x'"> </ span>। कंसोल एरर देगा।

— टॉमीक्यू

इस पद्धति का उपयोग करते हुए, क्या मैं एक और अभिव्यक्ति जोड़ सकता हूं?

— हाइक नालबंदियन

@ हाइकबांडियन हाँ आप एक और एक्सप्रेशन भी जोड़ सकते हैं:ng-class="[expression1? 'class1 class2' : 'class3 class4', expression2 ? 'class5' : 'class6']"

— माही-मैन

Answer 3

हाँ, आपके पास एनजी-क्लास में कई क्लास जोड़ने के लिए कई एक्सप्रेशन हो सकते हैं।

उदाहरण के लिए:

<div ng-class="{class1:Result.length==2,class2:Result.length==3}"> Dummy Data </div>

Answer 4

यहाँ अन्य उत्तरों के लिए एक अविश्वसनीय रूप से शक्तिशाली विकल्प:

ng-class="[  { key: resulting-class-expression }[ key-matching-expression ], ..  ]"

कुछ उदाहरण:

1. बस div को 'class1 class2 class3' जोड़ता है:

<div ng-class="[{true: 'class1'}[true], {true: 'class2 class3'}[true]]"></div>

2. $ सूचकांक के आधार पर, 'विषम' या 'सम' वर्गों को जोड़ता है:

<div ng-class="[{0:'even', 1:'odd'}[ $index % 2]]"></div>

3. गतिशील रूप से $ div के आधार पर प्रत्येक div के लिए एक वर्ग बनाता है

<div ng-class="[{true:'index'+$index}[true]]"></div>

यदि $index=5यह परिणाम होगा:

<div class="index5"></div>

यहां एक कोड नमूना है जिसे आप चला सकते हैं:

var app = angular.module('app', []); 
app.controller('MyCtrl', function($scope){
  $scope.items = 'abcdefg'.split('');
}); 

.odd  { background-color: #eee; }
.even { background-color: #fff; }
.index5 {background-color: #0095ff; color: white; font-weight: bold; }
* { font-family: "Courier New", Courier, monospace; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>

<div ng-app="app" ng-controller="MyCtrl">
  <div ng-repeat="item in items"
    ng-class="[{true:'index'+$index}[true], {0:'even', 1:'odd'}[ $index % 2 ]]">
    index {{$index}} = "{{item}}" ng-class="{{[{true:'index'+$index}[true], {0:'even', 1:'odd'}[ $index % 2 ]].join(' ')}}"
  </div>
</div>

Comments

शानदार जवाब! मैंने हमेशा अधिक जटिल ng-classनिर्देशों के लिए फ़ंक्शन का उपयोग किया है , जैसे कि जब मुझे एक ही तत्व पर एक टर्नरी और एक मानक अभिव्यक्ति लागू करने की आवश्यकता होती है। मैंने अभिव्यक्तियों के सरणियों के उपयोग को शामिल करने के लिए स्वीकृत उत्तर को संपादित किया है।

— डैनियल बॉननेल

मैं एक कोणीय विशेषज्ञ नहीं हूं, लेकिन लगता है कि यह निर्माण: [{true:'index'+$index}[true], {0:'even', 1:'odd'}[ $index % 2 ]]इस तरह से सरल हो सकता है ['index'+$index, {0:'even', 1:'odd'}[ $index % 2 ]]। मैंने इसे केवल कोणीय 1.5.9 में आज़माया है और यह काम करता है :) एक महान उत्तर के लिए धन्यवाद!

— वादीप

Answer 5

$scopeकंट्रोलर पर एक विधि का उपयोग करके , आप गणना कर सकते हैं कि दृश्य में कौन सी कक्षाएं आउटपुट कर सकती हैं। यह विशेष रूप से आसान है यदि आपके पास वर्ग नामों की गणना के लिए एक जटिल तर्क है और यह नियंत्रक के लिए इसे स्थानांतरित करके आपके विचार में तर्क की मात्रा को कम कर देगा:

app.controller('myController', function($scope) {

    $scope.className = function() {

        var className = 'initClass';

        if (condition1())
            className += ' class1';

        if (condition2())
            className += ' class2';

        return className;
    };
});

और देखने में, बस:

<div ng-class="className()"></div>

Comments

अगर रेंडर के बाद क्लास बदलती है, तो क्या एनजी-क्लास अभी भी बदलावों के बारे में सुन रहा है className?

— रीमर्श

IMHO, स्कोप केवल स्थिति को उजागर करना चाहिए । यह उस शर्त को पूरा ng-करने के लिए किस वर्ग का उपयोग करना है, यह निर्धारित करने के लिए HTML बाइंडिंग तक होना चाहिए ।

— अलनीतक

यह डोम तत्वों में वर्ग विशेषता को अधिलेखित करता है। यदि कोई इसका उपयोग करता है, तो उन्हें उन वर्गों को शामिल करना होगा जिन्हें लौटे में शर्तों की आवश्यकता नहीं है className।

— फुविन

Answer 6

वातानुकूलित कक्षाओं के लिए आपका उदाहरण काम करता है (यदि expressionDataXसही है तो वर्ग का नाम दिखाई देगा ):

<div ng-class="{class1: expressionData1, class2: expressionData2}"></div>

आप तत्व के उपयोगकर्ता द्वारा प्रदत्त कई वर्गों को भी जोड़ सकते हैं:

<div ng-class="[class1, class2]"></div>

उपयोग:

<div class="foo bar" class1="foo" class2="bar"></div>

Comments

क्या आप जानते हैं कि दो प्रकार के टेम्पलेट को संयोजित करना संभव है, अर्थात सशर्त वर्ग का उपयोग करना {}और डेटा-बाउंड क्लास का उपयोग करना है []?

— jwg

जहां तक ​​मुझे पता है यह संभव नहीं है। इसके अलावा, ngClassएक तत्व पर दो निर्देशन करना संभव नहीं है ।

— 10

धन्यवाद! इसकी पुष्टि अन्यत्र की जाती है।

— jwg

आप हैरान हो जाएगा: <a href="#/u/[[msg.from]]" ng-bind="msg.from" class="name, ng-class:[users[msg.from].nice, users[msg.from].star];" ng-class="{premium: users[msg.from].premium}"></a>और अधिक: scotch.io/tutorials/javascript/the-many-ways-to-use-ngclass

— mayankcpdixit

@jwg: आप दो प्रकार के टेम्पलेट्स को जोड़ सकते हैं ans यहाँ है: stackoverflow.com/questions/29230732/…

— satish kumar V

Answer 7

यहाँ एक उदाहरण कई कोणीय-यूआई-राउटर राज्यों की तुलना करते हुए OR का उपयोग कर रहा है ऑपरेटर:

<li ng-class="
    {
        warning:
            $state.includes('out.pay.code.wrong')
            || $state.includes('out.pay.failed')
        ,
        active:
            $state.includes('out.pay')
    }
">

यह ली को कक्षाओं की चेतावनी और / या सक्रिय देगा, जो कि शर्तों को पूरा करने पर निर्भर करता है।

Comments

मैं वास्तव में याद नहीं कर सकता। हालांकि यह तर्कसंगत नहीं है?

— nitech

यह स्पष्ट करने के लिए धन्यवाद कि कई वर्ग एक ही एनजी-क्लास ब्लॉक से लागू किए जा सकते हैं, जब तक कि उनकी प्रत्येक स्थिति संतुष्ट नहीं हो जाती।

— cedricdlb

Answer 8

नीचे सक्रिय और activemenu वर्ग और आइटम हैं और ShowCart अभिव्यक्ति / बूलियन मान हैं।

ng-class="{'active' : itemCount, 'activemenu' : showCart}"

Answer 9

कई शर्तों के साथ

<div ng-class="{'class1' : con1 || can2, 'class2' : con3 && con4}">
Hello World!
</div>

Answer 10

स्कॉच के लिए धन्यवाद

<div ng-repeat="step in steps" class="step-container step" ng-class="[step.status, step.type]" ng-click="onClick(step.type)">

यह मेरा संदर्भ था। पथ

Answer 11

दूसरे तरीके से हम "एकाधिक वर्ग का उपयोग करके" नियंत्रित करने के लिए एक फ़ंक्शन बना सकते हैं

सीएसएस

 <style>
    .Red {
        color: Red;
    }
    .Yellow {
        color: Yellow;
    }
      .Blue {
        color: Blue;
    }
      .Green {
        color: Green;
    }
    .Gray {
        color: Gray;
    }
    .b {
         font-weight: bold;
    }
</style>

लिपि

<script>
    angular.module('myapp', [])
            .controller('ExampleController', ['$scope', function ($scope) {
                $scope.MyColors = ['It is Red', 'It is Yellow', 'It is Blue', 'It is Green', 'It is Gray'];
                $scope.getClass = function (strValue) {
                    if (strValue == ("It is Red"))
                        return "Red";
                    else if (strValue == ("It is Yellow"))
                        return "Yellow";
                    else if (strValue == ("It is Blue"))
                        return "Blue";
                    else if (strValue == ("It is Green"))
                        return "Green";
                    else if (strValue == ("It is Gray"))
                        return "Gray";
                }
        }]);
</script>

उसका इस्तेमाल कर रहे हैं

<body ng-app="myapp" ng-controller="ExampleController">

<h2>AngularJS ng-class if example</h2>
<ul >
    <li ng-repeat="icolor in MyColors" >
        <p ng-class="[getClass(icolor), 'b']">{{icolor}}</p>
    </li>
</ul>

आप उदाहरण के लिए एनजी श्रेणी में पूर्ण कोड पृष्ठ का उल्लेख कर सकते हैं