Bagaimana cara membuat acara ng-click bersyarat?

Saya memiliki kode ini di dalam ng-repeat:

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

Bagaimana cara membuat kondisi bahwa tombol dinonaktifkan class="disabled"?

Atau adakah cara melakukannya dalam Javascript sehingga akan terlihat seperti:

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

Tidak baik untuk memanipulasi dengan DOM (termasuk memeriksa atribut) di sembarang tempat kecuali arahan. Anda dapat menambahkan beberapa nilai ke dalam cakupan yang menunjukkan jika link harus dinonaktifkan.

Tetapi masalah lainnya adalah ngDisabled tidak berfungsi pada apa pun kecuali kontrol formulir, jadi Anda tidak dapat menggunakannya dengan <a>, tetapi Anda dapat menggunakannya dengan <button> dan menatanya sebagai tautan.

Cara lain adalah dengan menggunakan evaluasi lazy dari ekspresi seperti isDisabled || action()sehingga tindakan tidak akan dipanggil jika isDisabledbenar.

Ini dia kedua solusi tersebut: http://plnkr.co/edit/5d5R5KfD4PCE8vS3OSSx?p=preview

Kita bisa menambahkan event ng-click secara kondisional tanpa menggunakan kelas yang dinonaktifkan.

HTML:

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

Saya menggunakan ekspresi && yang bekerja dengan sempurna untuk saya.

Sebagai contoh,

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

Jika vm.slideOneValidsalah, bagian kedua dari ekspresi tidak diaktifkan. Saya tahu ini memasukkan logika ke DOM, tetapi ini cara cepat yang kotor untuk menonaktifkan ng dan ng-klik untuk menempatkannya dengan baik.

Ingatlah untuk menambahkan ng-model ke elemen agar ng-nonaktif bekerja.

Pada dasarnya ng-clickpertama-tama memeriksa isDisableddan berdasarkan nilainya itu akan memutuskan apakah fungsi harus dipanggil atau tidak.

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

ATAU baca sebagai

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

Anda bisa mencoba menggunakan ng-class.
Berikut adalah contoh sederhana saya:
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>

Status adalah atribut khusus dari objek, Anda dapat menamainya apa pun yang Anda inginkan.
The disableddalam ng-classadalah nama kelas CSS, yang object.statusharus trueataufalse

Anda dapat mengubah setiap status objek dalam fungsi disableIt.
Di Kontroler Anda, Anda dapat melakukan ini:

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

Saya juga mengalami masalah ini dan saya baru tahu bahwa jika Anda menghapus "#", masalah tersebut akan hilang. Seperti ini :

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