এনজি-ক্লিক ইভেন্টটি কীভাবে শর্তযুক্ত করা যায়?


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
  }
});

উত্তর:


205

নির্দেশ ব্যতীত অন্য কোনও জায়গায় ডিওএম (গুণাবলীর চেক সহ) সহ কারসাজ্য করা ভাল নয়। লিঙ্কটি অক্ষম করা উচিত কিনা তা নির্দেশ করে আপনি কিছু স্কোপ যুক্ত করতে পারেন।

তবে অন্য সমস্যাটি হ'ল এনজিডিএলড ফর্ম নিয়ন্ত্রণ ব্যতীত অন্য কিছুতে কাজ করে না, তাই আপনি <a> দিয়ে এটি ব্যবহার করতে পারবেন না, তবে আপনি এটি <বাটন> দিয়ে ব্যবহার করতে পারেন এবং এটি লিঙ্ক হিসাবে স্টাইল করতে পারেন।

আরেকটি উপায় হ'ল এক্সপ্রেশন যেমন অলস মূল্যায়ন ব্যবহার করা হয় isDisabled || action()তাই যদি ক্রিয়াটি isDisabledসত্য হয় তবে ডাকা হবে না ।

এখানে উভয় সমাধানই যায়: http://plnkr.co/edit/5d5R5KfD4PCE8vS3OSSx?p= পূর্বরূপ


67
সুতরাং উপসংহারে: এনজি-ক্লিক = "isD অক্ষম || ক্রিয়া ()" কৌশলটি করেছে
অ্যালন

27
আরও ভাল: ||হওয়া উচিত &&, যদিও এটি আপনার প্লুঙ্কে কাজ করে, যদি isDisবল হয় একটি পদ্ধতি ডাবল পাইপ একটি বৈধ এক্সপ্রেশন জন্য পরীক্ষা করা চালিয়ে যান। এটি ক্ষেত্রে নয়&&
পলিক্লিক

7
@ পলিক্লিক ক্লিক করুন লজিক তারপর খুব পরিবর্তন হবে। যদি আইডিজাবিলটি সত্য হয়, তবে অ্যাকশন () কল হবে।
ইউসি জাভা

@ পলিক্লিক: তবে পয়েন্টটি হ'ল অক্ষম থাকলে পরীক্ষা করা চালিয়ে যাওয়া নয় । এছাড়াও, আপনার সংস্করণে, যদি isDisabled()মিথ্যা প্রত্যাবর্তন হয়, না action()ডাকা হবে না এবং "একটি বৈধ এক্সপ্রেশন জন্য" পরীক্ষা করা অবিরত থাকবে।
সেবাস্তিয়ান মাচ

1
@ ইউসিজেভা, যদি && ব্যবহার করা হয় তবে এটি তখনই অক্ষম হবে (বা এটি সক্ষম) হবে। এটি হয় এনজি-ক্লিক = "ফর্ম। $ বৈধ ও& ক্রিয়া ()" বা এনজি-ক্লিক = "ফর্ম $ $ অবৈধ || ক্রিয়া ()"
ওয়েইহুই গুও

47

আমরা অক্ষম শ্রেণীর ব্যবহার না করে শর্ত অনুসারে এনজি-ক্লিক ইভেন্টটি যুক্ত করতে পারি।

এইচটিএমএল:

<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= পূর্বরূপ

<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
}

1

আমার কাছেও এই সমস্যা ছিল এবং আমি খুব সহজেই জানতে পেরেছি যে আপনি যদি "#" সরান তবে সমস্যাটি চলে যাবে। এটার মত :

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

hrefব্যবহার করা উচিত নয়, ng-hrefপরিবর্তে ব্যবহার করুন।
ফিলিপ অ্যালারকন

3
@ ফিলিপ অ্যালারকন ng-hrefকেবল তখনই প্রয়োজনীয় যখন আপনার গতিশীল দিকটি গণনা করতে হবে। যদি পথটি কখনই পরিবর্তিত hrefহয় না, ঠিক আছে।
রবি
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.