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

115

У меня есть этот код внутри 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
  }
});
Alon
источник

Ответы:

205

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

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

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

Вот оба решения: http://plnkr.co/edit/5d5R5KfD4PCE8vS3OSSx?p=preview

Валентин Шибанов
источник
67
итак, в заключение: ng-click = "isDisabled || action ()" сделал свое дело
Алон
27
лучше: ||должно быть &&, хотя он работает в вашем plunk, если isDisabled - это метод, двойные каналы продолжают проверять допустимое выражение. Это не тот случай с&&
polyclick
7
@polyclick логика тоже изменится. если isDisabled возвращает true, тогда вызывается action ().
UCJava
@polyclick: Но суть в том, чтобы не проверять, отключено ли. Кроме того, в вашей версии, если isDisabled()возвращается false, ни один action()вызов не будет выполняться, и проверка «на правильное выражение» не продолжается.
Себастьян Мах
1
@UCJava, если используется &&, тогда будет! IsDisabled (или isEnabled). Это либо ng-click = "Form. $ Valid && action ()", либо ng-click = "Form. $ Invalid || action ()"
Вэйхуи Гуо
47

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

HTML:

<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ложно, вторая часть выражения не запускается. Я знаю, что это помещает логику в DOM, но это быстрый грязный способ отключить ng и нажать ng-click, чтобы разместить красиво.

Просто не забудьте добавить к элементу ng-model, чтобы ng-disabled работал.

Ник Рес
источник
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=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
}
zx1986
источник
1

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

<a href="" class="disabled" ng-click="doSomething(object)">Do something</a>
pollux1er
источник
hrefне следует использовать, используйте ng-hrefвместо этого.
Фелипе Аларкон
3
@Felipe Alarcon ng-hrefнеобходим только тогда, когда вам нужно динамически рассчитать путь. Если путь никогда не изменится, hrefничего страшного.
Ravvy 08