119

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

6 回答 6

208

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

但另一个问题是 ngDisabled 除了表单控件外，对任何东西都不起作用，所以你不能将它与 <a> 一起使用，但你可以将它与 <button> 一起使用并将其设置为链接。

另一种方法是对表达式使用惰性求值，例如，如果为真，isDisabled || action()则不会调用动作。isDisabled

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

于 2013-01-27T09:41:30.293 回答
47

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

HTML：

<div ng-repeat="object in objects">
<span ng-click="!object.status && disableIt(object)">{{object.value}}</span>
</div>
于 2015-07-10T12:17:39.207 回答
8

我使用 && 表达式，这对我来说非常有用。

例如，

<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 工作。

于 2017-01-28T03:11:35.310 回答
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's false the clicked will be called) || clicked()">Do something</span>
于 2018-08-29T12:05:49.577 回答
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>

状态是对象的自定义属性，您可以随意命名。in是一个 CSS 类名，
应该是ordisabledng-classobject.statustruefalse

您可以在 function 中更改每个对象的状态disableIt。
在您的控制器中，您可以这样做：

$scope.disableIt = function(obj) {
  obj.status = !obj.status
}
于 2013-10-17T04:09:14.573 回答
1

I had this issue also and I simply found out that if you simply remove the "#" the issue goes off. Like this :

<a href="" class="disabled" ng-click="doSomething(object)">Do something</a>
于 2015-11-03T14:06:19.440 回答