Question

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

Answer 1

在除指令之外的任何地方使用DOM（包括检查属性）进行操作是不好的。您可以在范围内添加一些值，指示是否应禁用链接。

但是其他问题是ngDisabled不能处理除表单控件之外的任何内容，因此您不能将它与＆lt; a＆gt;一起使用，但您可以将它与＆lt; button＆gt;一起使用。并将其设计为链接。

另一种方法是对isDisabled || action()之类的表达式进行延迟评估，这样如果isDisabled为真，则不会调用操作。

这里有两个解决方案：http://plnkr.co/edit/5d5R5KfD4PCE8vS3OSSx?p=preview

Answer 2

我们可以有条件地添加ng-click事件而不使用禁用的类。

HTML：

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

Answer 3

我使用＆amp;＆amp;表达对我来说很完美。

例如，

<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为false，则表达式的第二部分不会被触发。我知道这会将逻辑放入DOM中，但它是一种快速的方法，可以使用ng-disabled和ng-click来放置好。

请记住在元素中添加ng-model以使ng-disabled工作。

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

Answer 5

您可以尝试使用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中更改每个对象的状态 在您的Controller中，您可以这样做：

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

Answer 6

我也有这个问题而且我发现如果你只是删除“＃”就会出现问题。像这样：

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

如何使ng-click事件有条件？

6 个答案: