AngularJS एनजी-क्लास अगर-और अभिव्यक्ति

Question

साथ AngularJSमैं उपयोग कर रहा हूँ ng-classनिम्नलिखित तरीके:

<div class="bigIcon" data-ng-click="PickUp()" 
ng-class="{first:'classA', second:'classB', third:'classC', fourth:'classC'}[call.State]"/>

मैं सोच रहा हूँ कि क्या मैं if-elseअभिव्यक्ति का उपयोग कुछ इसी तरह कर सकता हूँ :

<div class="bigIcon" data-ng-click="PickUp()" 
ng-class="{first:'classA', second:'classB', else:'classC'}[call.State]"/>

तो जब भी call.Stateअलग firstया secondउपयोग किया जाता है classCऔर प्रत्येक मूल्य को निर्दिष्ट करने से बचें?

Answer 1

नेस्टेड इनलाइन का प्रयोग करें यदि-तो बयान ( त्रिगुट ऑपरेटर्स )

<div ng-class=" ... ? 'class-1' : ( ... ? 'class-2' : 'class-3')">

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

<div ng-class="apt.name.length >= 15 ? 'col-md-12' : (apt.name.length >= 10 ? 'col-md-6' : 'col-md-4')">
    ...
</div>

और सुनिश्चित करें कि यह आपके सहयोगियों द्वारा पठनीय है :)

Comments

यदि मुझे दो वर्गों को जोड़ने की आवश्यकता हो तो क्या होगा?

— मिरोकाबिनी

क्षमा करें, मेरा मतलब है "अगर यह एक और दूसरी कक्षा है तो वह है"। दो वर्ग, दो अलग-अलग स्थितियां।

— मिरोकाबिनी

@ मिक्रोबाबीनी, ng-class="{'class1': ##condition1## , 'class2': ##condition2## }"जैसा कि आप ऊपर दिए गए प्रश्न में देख सकते हैं

— जोसेफ हरष

यह कुछ ऐसा नहीं है जिसे मैं दृश्य में देखना चाहता हूं। दृश्य के लिए बहुत अधिक तर्क।

— अट्टुरसम्स

@Zehelvion मुझे असहमत होना पड़ेगा। यह व्यू लॉजिक है। आप अपने नियंत्रक या किसी सेवा के भीतर किस स्तंभ वर्ग का उपयोग करना चाहते हैं, यह तय करना चाहते हैं .. यह वह जगह है जहाँ यह होना चाहिए।

— निक

Answer 2

आप इस तरह एक समारोह का उपयोग करके कोशिश कर सकते हैं:

<div ng-class='whatClassIsIt(call.State)'>

फिर फ़ंक्शन में अपना तर्क रखें:

    $scope.whatClassIsIt= function(someValue){
     if(someValue=="first")
            return "ClassA"
     else if(someValue=="second")
         return "ClassB";
     else
         return "ClassC";
    }

मैंने एक उदाहरण के साथ एक बेला बनाया: http://jsfiddle.net/DotDotDot/nMk6M/

Comments

नेस्टेड टर्नरी ऑपरेटरों की तुलना में यह बहुत बेहतर उपाय है

— डेविड कहते हैं

इसे प्यार करना। यह एक साधारण एनजी-क्लास सशर्त की तुलना में html को भी साफ रखता है।

— 20

इस दृष्टिकोण के साथ समस्या अब आप सीएसएस कक्षाओं के नियंत्रक को जागरूक कर रहे हैं। अच्छा तरीका नहीं। नियंत्रक में एक चर सेट करना और फिर यह निर्धारित करना कि चर से HTML में किस वर्ग का उपयोग करना बेहतर समाधान है।

— 1934

यह सिर्फ एक संकेत है कि आप इसे कैसे कर सकते हैं, यह समस्या काफी सरल थी, एक टर्नरी ऑपरेटर से निपटा जा सकता है, लेकिन जब आपको अधिक तर्क की आवश्यकता होती है तो आप इसे सीधे HTML में नहीं करना चाहते हैं, एक सबसे तेज समाधान है , जैसा मैंने किया, उसके लिए अपने नियंत्रक में एक फ़ंक्शन का उपयोग करने के लिए (यदि आप नहीं चाहते हैं कि नियंत्रक को सीएसएस के बारे में पता हो, तो आप उस मान के आधार पर HTML में एक स्थिति चर भी देख और सेट कर सकते हैं। )। लेकिन, अगर आपके पास थोड़ा और तर्क है, या कई दोहराव हैं, तो इसे एक निर्देश में रखें, यह क्लीनर होना चाहिए। उदाहरण ज्यादातर HTML में तर्क नहीं लगाने के बारे में था

— DotDotDot

यदि आपको 2 या 3 से अधिक अलग-अलग वर्ग के लिए शर्त जोड़ने की आवश्यकता है तो टर्नरी ऑपरेटरों से बेहतर, तर्क के साथ html को अलग करें :)

— Tho Vo

Answer 3

मेरे पास एक ऐसी स्थिति थी जहां मुझे दो की जरूरत थी 'अगर' कथन जो दोनों सच हो सकते हैं और एक 'और' या डिफ़ॉल्ट अगर न तो सच थे, तो यकीन नहीं कि अगर यह जोसेफ के जवाब में सुधार है, लेकिन यह मुझे साफ लग रहा था:

ng-class="{'class-one' : value.one , 'class-two' : value.two}" class="else-class"

जहाँ value.one और value.two सत्य होते हैं, वे .else-class पर मिसाल लेते हैं

Answer 4

स्पष्ट रूप से ! हम पूरी तरह से उदाहरण के साथ एक CSS वर्ग का नाम वापस करने के लिए एक फ़ंक्शन बना सकते हैं।

सीएसएस

<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>
<hr/>
<p>Other way using : ng-class="{'class1' : expression1, 'class2' : expression2,'class3':expression2,...}"</p>
<ul>
    <li ng-repeat="icolor in MyColors">
        <p ng-class="{'Red':icolor=='It is Red','Yellow':icolor=='It is Yellow','Blue':icolor=='It is Blue','Green':icolor=='It is Green','Gray':icolor=='It is Gray'}" class="b">{{icolor}}</p>
    </li>
</ul>

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

Answer 5

उपरोक्त समाधान किसी भी तरह पृष्ठभूमि छवियों के साथ कक्षाओं के लिए मेरे लिए काम नहीं किया। मैंने जो किया था, मैं एक डिफॉल्ट क्लास (जिसे आपको किसी और की ज़रूरत थी) और सेट क्लास = 'डिफॉल्टक्लास' और फिर एनजी-क्लास = "{class1: abc, class2: xyz}" सेट किया।

<span class="booking_warning" ng-class="{ process_success: booking.bookingStatus == 'BOOKING_COMPLETED' || booking.bookingStatus == 'BOOKING_PROCESSED', booking_info: booking.bookingStatus == 'INSTANT_BOOKING_REQUEST_RECEIVED' || booking.bookingStatus == 'BOOKING_PENDING'}"> <strong>{{booking.bookingStatus}}</strong> </span>

पुनश्च: जिन वर्गों की स्थिति है, उन्हें डिफ़ॉल्ट वर्ग को ओवरराइड करना चाहिए, जैसा कि महत्वपूर्ण है

Answer 6

यह ऐसा करने का सबसे अच्छा और विश्वसनीय तरीका है। यहाँ एक सरल उदाहरण है और उसके बाद आप अपने कस्टम तर्क विकसित कर सकते हैं:

//In .ts
public showUploadButton:boolean = false;

if(some logic)
{
    //your logic
    showUploadButton = true;
}

//In template
<button [class]="showUploadButton ? 'btn btn-default': 'btn btn-info'">Upload</button>

Answer 7

मेरा एक वर्कअराउंड केवल एनजी-क्लास टॉगलिंग के लिए एक मॉडल चर में हेरफेर करना है:

उदाहरण के लिए, मैं अपनी सूची की स्थिति के अनुसार वर्ग को टॉगल करना चाहता हूं:

1) जब भी मेरी सूची खाली होती है, मैं अपना मॉडल अपडेट करता हूं:

$scope.extract = function(removeItemId) {
    $scope.list= jQuery.grep($scope.list, function(item){return item.id != removeItemId});
    if (!$scope.list.length) {
        $scope.liststate = "empty";
    }
}

2) जब भी मेरी सूची खाली नहीं होती है, मैं एक और राज्य निर्धारित करता हूं

$scope.extract = function(item) {
    $scope.list.push(item);
    $scope.liststate = "notempty";
}

3) जब मेरी सूची को कभी छुआ नहीं गया है, तो मैं एक और वर्ग देना चाहता हूं (यह वह जगह है जहां पेज शुरू किया गया है):

$scope.liststate = "init";

3) मैं अपने एनजी-क्लास पर इस अतिरिक्त मॉडल का उपयोग करता हूं:

ng-class="{'bg-empty': liststate == 'empty', 'bg-notempty': liststate == 'notempty', 'bg-init': liststate = 'init'}"

Answer 8

इसे इस तरह से उपयोग करें:

    <div [ngClass]="{cssClass A: condition 1, cssClass B: condition 2, cssClass C: condition 3}">...</div>

Answer 9

आप इस विधि को आजमा सकते हैं:

</p><br /><br />
<p>ng-class="{test: obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}<br /><br /><br />

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

आप पूरी जानकारी यहाँ से प्राप्त कर सकते हैं ।