จะทำให้เหตุการณ์ ng-click มีเงื่อนไขได้อย่างไร?

ฉันมีรหัสนี้ใน ng-repeat:

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

วิธีสร้างเงื่อนไขว่าปุ่มถูกปิดใช้งานเมื่อมีclass="disabled"?

หรือมีวิธีทำใน Javascript เพื่อให้มีลักษณะดังนี้:

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

ไม่เป็นการดีที่จะจัดการกับ DOM (รวมถึงการตรวจสอบคุณสมบัติ) ในที่ใด ๆ ยกเว้นคำสั่ง คุณสามารถเพิ่มค่าบางค่าลงในขอบเขตที่ระบุว่าควรปิดใช้งานลิงก์หรือไม่

แต่ปัญหาอื่น ๆ คือ ngDisabled ไม่ทำงานกับสิ่งใดเลยยกเว้นการควบคุมแบบฟอร์มดังนั้นคุณจึงไม่สามารถใช้กับ <a> ได้ แต่คุณสามารถใช้กับ <button> และจัดรูปแบบเป็นลิงก์ได้

อีกวิธีหนึ่งคือการใช้การประเมินนิพจน์แบบขี้เกียจเช่นisDisabled || action()ดังนั้นการกระทำจะไม่ถูกเรียกว่าถ้าisDisabledเป็นจริง

ไปที่นี่ทั้งสองวิธี: http://plnkr.co/edit/5d5R5KfD4PCE8vS3OSSx?p=preview

เราสามารถเพิ่มเหตุการณ์ ng-click ตามเงื่อนไขโดยไม่ต้องใช้คลาสปิดใช้งาน

HTML:

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

ฉันใช้นิพจน์ && ซึ่งเหมาะกับฉันมาก

ตัวอย่างเช่น,

<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เป็นเท็จส่วนที่สองของนิพจน์จะไม่เริ่มทำงาน ฉันรู้ว่านี่เป็นการใส่ตรรกะลงใน DOM แต่มันเป็นวิธีที่รวดเร็วในการปิดการใช้งาน ng-disabled และ ng-click เพื่อวางสิ่งที่ดี

อย่าลืมเพิ่ม ng-model ให้กับองค์ประกอบเพื่อให้ ng-disabled ทำงานได้

โดยทั่วไป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>

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
}

ฉันมีปัญหานี้เช่นกันและฉันเพิ่งพบว่าหากคุณเพียงแค่ลบ "#" ปัญหาก็จะหายไป แบบนี้ :

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