Javascript 如何使 ng-click 事件有条件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14545744/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make an ng-click event conditional?
提问by Alon
I have this code inside ng-repeat:
我在 ng-repeat 中有这个代码：
<a href="#" class="disabled" ng-click="doSomething(object)">Do something</a>
How to make a condition that the button is disabled when it has class="disabled"?
如何设置按钮在有时被禁用的条件class="disabled"？
Or is there a way to do it in Javascript so that will look like:
或者有没有办法在 Javascript 中做到这一点，它看起来像：
$('.do-something-button').click(function(){
if (!$(this).hasClass('disabled')) {
do something
}
});
回答by Valentyn Shybanov
It is not good to manipulate with DOM (including checking of attributes) in any place except directives. You can add into scope some value indicating if link should be disabled.
在除指令之外的任何地方使用 DOM 进行操作（包括检查属性）都是不好的。您可以将一些值添加到范围内，指示是否应禁用链接。
But other problem is that ngDisabled does not work on anything except form controls, so you can't use it with <a>, but you can use it with <button> and style it as link.
但另一个问题是 ngDisabled 对表单控件以外的任何东西都不起作用，因此您不能将它与 <a> 一起使用，但您可以将它与 <button> 一起使用并将其设置为链接。
Another way is to use lazy evaluation of expressions like isDisabled || action()so action wouold not be called if isDisabledis true.
另一种方法是使用表达式的惰性求值，例如isDisabled || action()如果isDisabled为真，则不会调用 action 。
Here goes both solutions: http://plnkr.co/edit/5d5R5KfD4PCE8vS3OSSx?p=preview
这里有两种解决方案：http: //plnkr.co/edit/5d5R5KfD4PCE8vS3OSSx?p=preview
回答by Rubi saini
We can add ng-click event conditionally without using disabled class.
我们可以在不使用禁用类的情况下有条件地添加 ng-click 事件。
HTML:
HTML：
<div ng-repeat="object in objects">
<span ng-click="!object.status && disableIt(object)">{{object.value}}</span>
</div>
回答by Nick Res
I use the && expression which works perfectly for me.
我使用 && 表达式，它非常适合我。
For example,
例如，
<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>
If vm.slideOneValidis false, the second part of the expression is not fired. I know this is putting logic into the DOM, but it's a quick a dirty way to get ng-disabled and ng-click to place nice.
如果vm.slideOneValid为 false，则不会触发表达式的第二部分。我知道这是将逻辑放入 DOM 中，但这是一种快速的肮脏方式，可以让 ng-disabled 和 ng-click 放置好。
Just remember to add ng-model to the element to make ng-disabled work.
只需记住将 ng-model 添加到元素中即可使 ng-disabled 工作。
回答by Beginner
Basically ng-clickfirst checks the isDisabledand based on its value it will decide whether the function should be called or not.
基本上ng-click首先检查isDisabled并根据其值决定是否应调用该函数。
<span ng-click="(isDisabled) || clicked()">Do something</span>
OR read it as
或将其读作
<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>
回答by pollux1er
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>
回答by zx1986
You could try to use ng-class.
Here is my simple example:
http://plnkr.co/edit/wS3QkQ5dvHNdc6Lb8ZSF?p=preview
你可以尝试使用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>
The status is a custom attribute of object, you could name it whatever you want.
The disabledin ng-classis a CSS class name, the object.statusshould be trueor false
状态是对象的自定义属性，您可以随意命名。
该disabled中ng-class是一个CSS类名，object.status应该是true或false
You could change every object's statusin function disableIt.
In your Controller, you could do this:
您可以在 function 中更改每个对象的状态disableIt。
在您的控制器中，您可以这样做：
$scope.disableIt = function(obj) {
obj.status = !obj.status
}
