代码之家 › 专栏 › 技术社区 › Woodchuck

AngularJS禁用ngclick

angularjs-ng-click angularjs

Woodchuck · 技术社区 · 6 年前

在安格拉尔,有什么方法可以 ng-click 依赖于布尔值?

例如,我希望下面的文本(“click”)可以单击,但是只有当某些范围属性(例如, $rootScope.enableClick 是 true .

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

最好,是否有一种简单的方法可以在不创建自定义指令的情况下完成此操作?

3 回复 | 直到 6 年前

georgeawg 6 年前

使用奇怪和奇妙的 && logical operator 在 ng-click 表达式:

<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 属性不是 global attribute . 这个 ng-disabled 指令仅适用于 <input> , <button> , <textarea> 和 <select> 元素作为这些元素支持 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>

georgeawg 6 年前

看看这个,我用的方法和@Georgeawg相同。不同的是,我把它作为一个按钮格式,并使用 pointer-events: none 以便不会从 .clickable

.clickable {
  cursor: pointer;
  display: inline-block;
  width: 200px;
  text-align: center;
  padding: 10px;
  background-color: #eee;
  transition: all 0.3s ease;
  margin: 10px 0;
}
.clickable:hover {
  background-color: #ddd;
}
.test {
  color: grey;
  pointer-events: none;
}

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

orimdominic 6 年前

尝试

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

ng disabled指令设置窗体字段的disabled属性 (输入、选择或文本区域)。

推荐文章

Ali · 获取由ng repeat | Angular js填充的输入的编辑值

7 年前

Dave · 单击ng无法打开md菜单

7 年前

Father-Empire · 角度ng click=“function()”不触发,但(click)=“function()”触发

7 年前

ronit · 嵌套ng click参数未定义

7 年前

Crystal · 如何启动按钮单击,根据视图上的控制器执行不同的操作?

7 年前

Ajith · 如何在angularjs4中触发另一个组件的点击事件函数

7 年前

user1449456 · ng if='false'隐藏DIV

7 年前

Sachin HR · Angularjs将id传递到模态函数()

7 年前

N.Car · AngularJS-带有ng点击的ui路由无法正常工作

7 年前

Olafvv · AngularJS:ng单击时值更改时,ng更改不起作用

7 年前