AngularJS禁用ngClick

AngularJS禁用ngClick

本文介绍了AngularJS禁用ngClick的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在AngularJS中,有什么方法可以使ng-click依赖于布尔值吗?

In AngularJS, is there any way to make an ng-click dependent upon a boolean?

例如,我希望以下文本(点击")可被单击,但当某些范围属性(例如,$rootScope.enableClick)为true时,则仅单击 .

For example, I'd like the following text ("Click") to be clickable, but only when some scope property (e.g., $rootScope.enableClick) is true.

<div ng-click="count = count + 1" ng-init="count=0">Click</div>

最好,有没有一种简单的方法就可以执行此操作而无需创建自定义指令?

Preferably, is there a straightforward way to do this without creating a custom directive?

推荐答案

使用奇妙的 &&逻辑运算符ng-click表达式中:

Use the strange and wonderfull && logical operator in the ng-click expression:

<div ng-click="!stop && (count = count + 1)">Click me</div>

演示

.clickable {
   cursor: pointer;
}
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app ng-init="count=0">
   <div ng-click="!stop && (count = count + 1)" class="clickable" >Click Me</div>
   <div>Count={{count}}</div>
   <input type="checkbox" ng-model="stop">Stop counting<br>
</body>

或将与 ng-disabled 指令:

<button ng-click="count = count + 1" ng-disabled="stop" >Click Me</button>

禁用ng的指令不适用于<div>元素. disabled属性不是全局属性. ng-disabled指令仅适用于<input><button><textarea><select>元素,因为这些元素支持 disabled属性.

The ng-disabled directive does not work with <div> elements. The disabled property is not a global attribute. The ng-disabled directive only works with <input>, <button>, <textarea>, and <select> elements as those elements support the disabled property.

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app ng-init="count=0">
   <button ng-click="count = count + 1" ng-disabled="stop" >Click Me</button>
   <div>Count={{count}}</div>
   <input type="checkbox" ng-model="stop">Stop counting<br>
</body>

这篇关于AngularJS禁用ngClick的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-02 17:41