Как сделать событие ng-click условным?

У меня есть этот код внутри NG-повтор:

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

Ответы

Ответ 1

Неправильно манипулировать с DOM (включая проверку атрибутов) в любом месте, кроме директив. Вы можете добавить в область какое-то значение, указывающее, должна ли ссылка быть отключена.

Но другая проблема заключается в том, что ngDisabled не работает ни на чем, кроме элементов управления формой, поэтому вы не можете использовать его с <a> , но вы можете использовать его с помощью <button> и стилизовать его как ссылку.

Другой способ - использовать ленивую оценку выражений типа isDisabled || action(), так что действие wouold не будет вызываться, если isDisabled истинно.

Здесь представлены оба решения: http://plnkr.co/edit/5d5R5KfD4PCE8vS3OSSx?p=preview

Ответ 2

Мы можем добавить событие ng-click условно, не используя отключенный класс.

HTML:

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

Ответ 3

Я использую && которое отлично работает для меня.

Например,

<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-модель в элемент, чтобы сделать работу с ng-disabled.

Ответ 4

Вы можете попробовать использовать 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>

Статус - это настраиваемый атрибут объекта, вы можете назвать его как хотите.
disabled в ng-class - это имя класса CSS, object.status должно быть true или false

Вы можете изменить каждый статус объекта в функции disableIt.
В вашем контроллере вы можете сделать это:

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

Ответ 5

У меня тоже была эта проблема, и я просто выяснил, что если вы просто удалите "#", проблема исчезнет. Вот так:

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

Ответ 6

Обычно 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 false the clicked will be called) || clicked()">Do something</span>