एनजी-क्लिक ईवेंट सशर्त कैसे करें?

115

मेरे पास यह कोड एनजी-रिपीट के अंदर है:

<a href="#" class="disabled" ng-click="doSomething(object)">Do something</a>

यह कैसे करें कि बटन कब निष्क्रिय हो जाए class="disabled"?

या फिर जावास्क्रिप्ट में ऐसा करने का एक तरीका है जिससे यह दिखेगा:

$('.do-something-button').click(function(){
  if (!$(this).hasClass('disabled')) {
    do something
  }
});

javascript html angularjs

— एलन
स्रोत

205

निर्देशों को छोड़कर किसी भी स्थान पर DOM (विशेषताओं की जाँच सहित) के साथ हेरफेर करना अच्छा नहीं है। यदि आप लिंक को अक्षम किया जाना चाहिए, तो आप कुछ मान दर्शा सकते हैं।

लेकिन दूसरी समस्या यह है कि प्रपत्र नियंत्रणों को छोड़कर किसी भी चीज़ पर काम नहीं किया जाता है, इसलिए आप इसे <a> के साथ उपयोग नहीं कर सकते, लेकिन आप इसे <बटन> के साथ उपयोग कर सकते हैं और इसे लिंक के रूप में स्टाइल कर सकते हैं।

दूसरा तरीका भावों के आलसी मूल्यांकन का उपयोग करना है, isDisabled || action()ताकि एक्शन वाउल्ड isDisabledको सही नहीं कहा जा सके ।

यहाँ दोनों समाधान दिए गए हैं: http://plnkr.co/edit/5d5R5KfD4PCE8vS3OSSx?p=preview

— वैलेंटाइन श्योनोबोव
स्रोत

67

तो समाप्त करने के लिए: एनजी-क्लिक = "अक्षम है। कार्रवाई ()" चाल किया

— Alon

27

बेहतर: ||होना चाहिए &&, हालांकि यह आपके प्लंक में काम करता है, अगर isDisabled एक विधि है डबल पाइप एक वैध अभिव्यक्ति के लिए जांच करते रहते हैं। यही नहीं है&&

— पॉलीक्लिक

7

@ पॉलीसाइकलिक तो तर्क भी बदल जाएगा। यदि isDisabled रिटर्न सही है, तो कार्रवाई () को बुलाया जाएगा।

— यूसीजावा २०'१५

@ पॉलीसाइक्लिक: लेकिन बात यह है कि अक्षम होने पर जाँच जारी न रखें। साथ ही, आपके संस्करण में, यदि कोई isDisabled()गलत रिटर्न देता है , तो न action()तो कॉल किया जाएगा, न ही "वैध अभिव्यक्ति के लिए" जाँच जारी रहेगी।

— सेबेस्टियन मच

1

@UCJava, if && का उपयोग किया जाता है, तो यह होगा! यह या तो एनजी-क्लिक = "फॉर्म। $ वैध और& कार्रवाई ()" या एनजी-क्लिक = "फॉर्म। $। || एक्शन ()"

— वीहुई गुओ

47

हम विकलांग वर्ग का उपयोग किए बिना सशर्त रूप से एनजी-क्लिक इवेंट जोड़ सकते हैं।

HTML:

<div ng-repeat="object in objects">
<span ng-click="!object.status && disableIt(object)">{{object.value}}</span>
</div>

— रूबी सैनी
स्रोत

7

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

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

<button ng-model="vm.slideOneValid" ng-disabled="!vm.slideOneValid" ng-click="vm.slideOneValid && vm.nextSlide()" class="btn btn-light-green btn-medium pull-right">Next</button>

यदि vm.slideOneValidगलत है, तो अभिव्यक्ति का दूसरा भाग निकाल नहीं है। मुझे पता है कि यह डोम में तर्क डाल रहा है, लेकिन यह अच्छा करने के लिए एनजी-अक्षम और एनजी-क्लिक प्राप्त करने का एक त्वरित तरीका है।

बस एनजी-अक्षम काम करने के लिए तत्व में एनजी-मॉडल को जोड़ना याद रखें।

— निक रेस
स्रोत

4

मूल रूप से ng-clickपहले जांच करता है isDisabledऔर इसके मूल्य के आधार पर यह तय करेगा कि फ़ंक्शन को बुलाया जाना चाहिए या नहीं।

<span ng-click="(isDisabled) || clicked()">Do something</span>

या इसे पढ़ सकते हैं

<span ng-click="(if this value is true function clicked won't be called. and if it's false the clicked will be called) || clicked()">Do something</span>

— शुरुआती
स्रोत

1

आप उपयोग करने का प्रयास कर सकते हैं ng-class।
यहाँ मेरा सरल उदाहरण है:
http://plnkr.co/edit/wS3QkQ5dvHNdc6Lb8ZSF?p=preview

<div ng-repeat="object in objects">
  <span ng-class="{'disabled': object.status}" ng-click="disableIt(object)">
    {{object.value}}
  </span>
</div>

स्थिति ऑब्जेक्ट की एक कस्टम विशेषता है, आप इसे जो चाहें नाम दे सकते हैं। में एक CSS वर्ग नाम है, होना चाहिए या
disabledng-classobject.statustruefalse

आप फ़ंक्शन में प्रत्येक ऑब्जेक्ट की स्थिति बदल सकते हैं disableIt।
आपके नियंत्रक में, आप ऐसा कर सकते हैं:

$scope.disableIt = function(obj) {
  obj.status = !obj.status
}

— zx1986
स्रोत

1

मेरे पास यह मुद्दा भी था और मुझे बस यह पता चला कि यदि आप बस "#" हटा देते हैं तो समस्या बंद हो जाती है। ऐशे ही :

<a href="" class="disabled" ng-click="doSomething(object)">Do something</a>

— pollux1er
स्रोत

hrefng-hrefइसके बजाय उपयोग नहीं किया जाना चाहिए ।

— फेलिप अलर्कन

3

ng-hrefजब आप गतिशील रूप से पथ की गणना करने की आवश्यकता होती है, तो @ फेलिप अलर्कन केवल आवश्यक है। यदि मार्ग कभी नहीं बदलता है, hrefतो ठीक है।

— रविवि