Bir ng-tıklama olayını nasıl koşullu yapabilirim?

Bu kod ng-tekrar içinde var:

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

Düğmeye sahipken devre dışı bırakılma koşulu nasıl yapılır class="disabled"?

Veya bunu Javascript'te yapmanın bir yolu var mı, böylece şöyle görünecek:

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

Direktifler dışında herhangi bir yerde DOM ile (özniteliklerin kontrol edilmesi dahil) değişiklik yapmak iyi değildir. Kapsama, bağlantının devre dışı bırakılıp bırakılmayacağını belirten bazı değerler ekleyebilirsiniz.

Ancak diğer bir sorun, ngDisabled'ın form kontrolleri dışında hiçbir şey üzerinde çalışmamasıdır, bu nedenle <a> ile kullanamazsınız, ancak <button> ile kullanabilir ve bağlantı olarak stil verebilirsiniz.

Diğer bir yol, ifadelerin tembel bir şekilde değerlendirilmesidir, isDisabled || action()öyle ki isDisabled, eğer doğruysa eylem çağrılmaz .

Her iki çözüm de burada: http://plnkr.co/edit/5d5R5KfD4PCE8vS3OSSx?p=preview

Devre dışı bırakılmış sınıfı kullanmadan koşullu olarak ng-click olayını ekleyebiliriz.

HTML:

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

Benim için mükemmel çalışan && ifadesini kullanıyorum.

Örneğin,

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

Eğer vm.slideOneValidyanlış ifade ikinci bölümü ateş edilmez. Bunun DOM'a mantık koyduğunu biliyorum, ancak bu, ng-devre dışı bırakmanın ve hoş bir yer için ng-tıklamanın hızlı ve kirli bir yolu.

Sadece ng-engelli çalışması için elemana ng-model eklemeyi unutmayın.

Temel olarak ng-clickönce kontrol eder isDisabledve değerine göre fonksiyonun çağrılıp çağrılmayacağına karar verir.

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

VEYA olarak oku

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

Kullanmayı deneyebilirsin ng-class.
İşte basit örneğim:
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>

Durum, nesnenin özel bir özniteliğidir, istediğiniz gibi adlandırabilirsiniz. İçinde bir CSS sınıf adıdır olmalı veya
disabledng-classobject.statustruefalse

Sen değişebilir her nesnenin durumunu işlevinde disableIt.
Denetleyicinizde şunları yapabilirsiniz:

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

Bu sorunu da yaşadım ve basitçe "#" işaretini kaldırırsanız sorunun çözüldüğünü öğrendim. Bunun gibi :

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