एनजी-क्लास का उपयोग करके एंगुलरजेएस टॉगल क्लास

Question

मैं एक तत्व के वर्ग का उपयोग कर टॉगल करने की कोशिश कर रहा हूं ng-class

<button class="btn">
  <i ng-class="{(isAutoScroll()) ? 'icon-autoscroll' : 'icon-autoscroll-disabled'}"></i>
</button>

isAutoScroll ():

$scope.isAutoScroll = function()
{
    $scope.autoScroll = ($scope.autoScroll) ? false : true;
    return $scope.autoScroll;
}

असल में, अगर $scope.autoScrollयह सच है, तो मैं एनजी-क्लास होना icon-autoscrollचाहता हूं और अगर यह गलत है, तो मैं चाहता हूं कि यह होicon-autoscroll-disabled

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

Error: Lexer Error: Unexpected next character at columns 18-18 [?] in expression [{(isAutoScroll()) ? 'icon-autoscroll' : 'icon-autoscroll-disabled'}].

मैं इसे सही तरीके से कैसे करूं?

संपादित करें

समाधान 1: (पुराना)

<button class="btn" ng-click="autoScroll = !autoScroll">
  <i ng-class="{'icon-autoscroll': autoScroll, 'icon-autoscroll-disabled': !autoScroll}"></i>
</button>

EDIT 2

समाधान 2:

मैं समाधान को अद्यतन करना चाहता था Solution 3, जैसा कि स्टीवी द्वारा प्रदान किया गया था, इसका उपयोग किया जाना चाहिए। यह सबसे मानक है जब यह टर्नरी ऑपरेटर (और मुझे पढ़ने में सबसे आसान) के लिए आता है। समाधान होगा

<button class="btn" ng-click="autoScroll = !autoScroll">
  <i ng-class="autoScroll ? 'icon-autoscroll' : 'icon-autoscroll-disabled'"></i>
</button>

अनुवाद करने के लिए:

if (autoScroll == true) ?// उपयोग वर्ग 'icon-autoscroll' :// और उपयोग'icon-autoscroll-disabled'

Comments

angular expressionsडॉक्स में प्रति व्यक्ति सशर्त का उपयोग नहीं कर सकते हैं => कोई नियंत्रण प्रवाह विवरण नहीं: आप कोणीय अभिव्यक्ति में निम्न में से कोई भी नहीं कर सकते हैं: सशर्त, लूप, या फेंक। किसी अन्य फ़ंक्शन या निर्देश का उपयोग करें

— charlietfl

@ रॉनी मैंने आपका समाधान देखा, और यह बहुत अच्छा था। लेकिन मुझे आश्चर्य है कि autoScrollयहां प्रत्येक बटन में प्रभाव क्यों होगा? (मैंने कई बटन के साथ इसका परीक्षण किया, और यह अच्छी तरह से काम भी करता है) मेरा मतलब है, जब मैं प्रत्येक बटन पर क्लिक करता हूं, तो यह सभी बटन के बजाय बस उस बटन को प्रभावित करता है।

— zx1986

Answer 1

एनजी-क्लास में सशर्त का उपयोग कैसे करें:

समाधान 1:

<i ng-class="{'icon-autoscroll': autoScroll, 'icon-autoscroll-disabled': !autoScroll}"></i>

समाधान 2:

<i ng-class="{true: 'icon-autoscroll', false: 'icon-autoscroll-disabled'}[autoScroll]"></i>

समाधान 3 (कोणीय ऑपरेटर के लिए कोणीय v.1.1.4 + शुरू किया गया समर्थन):

<i ng-class="autoScroll ? 'icon-autoscroll' : 'icon-autoscroll-disabled'"></i>

Plunker

Comments

दूसरा उदाहरण क्लीनर है, लेकिन यह हास्यास्पद है कि आप उस चर को नहीं डाल सकते हैं जिसका आप अभिव्यक्ति के सामने मूल्यांकन कर रहे हैं ... यह सिर्फ हास्यास्पद है। एक अगर एक बयान के रूप में अभिव्यक्ति को देखने की कल्पना करो: "अगर (चर) सच: यह करो, गलत: ऐसा करो ... उघ # अधूरी

— mattdlockyer

@Stewie Faaakin बहुत खूबसूरत दोस्त, प्यार करता हूँ कि यह वास्तविक कोड की तरह दिखता है न कि कुछ

— बेस्वाद

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

— लार्बी

टर्नरी वास्तव में वही है जिसकी मुझे तलाश थी। संस्करण समर्थन विवरण के साथ तीन उदाहरण प्रदान करने वाला अच्छा काम।

— TaeKwonJoe

Answer 2

वैकल्पिक तर्क के रूप में, जावास्क्रिप्ट लॉजिक ऑपरेटर '&&' पर आधारित है जो अंतिम मूल्यांकन देता है, आप ऐसा भी कर सकते हैं:

<i ng-class="autoScroll && 'icon-autoscroll' || !autoScroll && 'icon-autoscroll-disabled'"></i>

यह केवल थोड़ा सा वाक्यविन्यास है, लेकिन मेरे लिए पढ़ना आसान है।

Answer 3

शर्त के आधार पर एक से अधिक वर्ग जोड़ें:

<div ng-click="AbrirPopUp(s)" 
ng-class="{'class1 class2 class3':!isNew, 
           'class1 class4': isNew}">{{ isNew }}</div>

लागू करें: class1 + class2 + class3 जब नया = गलत ,

लागू करें: class1 + class4 जब नया = सत्य हो

Answer 4

<div data-ng-init="featureClass=false" 
     data-ng-click="featureClass=!featureClass" 
     data-ng-class="{'active': featureClass}">
    Click me to toggle my class!
</div>

JQuery की toggleClassविधि के अनुरूप , यह activeतत्व को क्लिक करने पर कक्षा को चालू / बंद करने का एक तरीका है।

Comments

क्या आप अंग्रेजी में अपने उत्तर के बारे में कुछ और जानकारी प्रदान कर सकते हैं? यह उन उत्तरों से कैसे अलग है जो पहले से ही यहां हैं?

— ओनोट्स

मुझे यकीन नहीं है कि इस उत्तर में कई नकारात्मक वोट क्यों हैं ?? यह वह उपाय है जो वास्तव में मेरे लिए ऊपर के अन्य लोगों की तुलना में बेहतर काम करता है ...

— पाउलो ग्रिएत्टनर

मुझे लगता है कि विवरण बुरी तरह से लिखा गया है और लोग "jQuery" शब्द पर प्रतिक्रिया करते हैं। क्या कहने के लिए इसका मतलब है "यह JQuery में टॉगलक्लास फ़ंक्शन के लिए एनालॉग है"। BTW, क्या आपको चर को पार करने की आवश्यकता है?

— एड्रियन

Answer 5

ऑटोस्कोप को नियंत्रक में परिभाषित और संशोधित किया जाएगा।

<span ng-class= "autoscroll?'class_if_true':'class_if_false'"></span>

शर्त के आधार पर कई वर्ग जोड़ें:

<span ng-class= "autoscroll?'first second third':'classes_if_false'"></span>

Answer 6

मैंने यह काम इस तरह से किया है:

<button class="btn" ng-click='toggleClass($event)'>button one</button>
<button class="btn" ng-click='toggleClass($event)' >button two</button>

// अपने कंट्रोलर में

 $scope.toggleClass = function (event){
        $(event.target).toggleClass('active');
    }

Comments

जबकि यह काम करता है, आप कोणीय और jQuery का मिश्रण कर रहे हैं। आपको कोशिश करनी चाहिए और इससे बचना चाहिए। मूल रूप से जो पूछा गया वह एक क्लिक इवेंट के बिना किया जा सकता है। क्या होगा यदि आपके पास एक और बटन है जो ऊपर दिए गए बटन पर इस वर्ग को टॉगल करने वाला है? यह अब अपडेट नहीं होगा क्योंकि आप इसे क्लिक पर बदल रहे हैं और एनजी-क्लास के माध्यम से नहीं

— रोनी

यह jqLite से है। अधिक docs.angularjs.org/api/ng/function/angular.element के लिए

— रूहुल अमीन

मै समझता हुँ। मेरा कहना है कि मूल प्रश्न का उत्तर प्राप्त करने के लिए आपको jQuery का उपयोग करने की आवश्यकता नहीं है।

— रॉनी