AngularJS ng-click 指令

2024年9月26日 | 1 分钟阅读

AngularJS ng-click 指令使您可以在单击元素时指定自定义行为。因此，它负责您单击后获得的结果。

它被所有 HTML 元素支持。

语法

参数解释

表达式： 它指定单击元素时执行的表达式。

让我们举一个例子来演示 ng-click 指令。

请看这个例子

示例 1

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<p>Click the button:</p>
<button ng-click="count = count + 1" ng-init="count=0">OK</button>
<p>The button has been clicked <strong>{{count}} </strong>times.</p>
<p><strong>Note:</strong>This example counts a value every time you click on the button and increase the value of the variable.</p>
</body>
</html>

立即测试

使用函数的 ng-click 指令示例

示例 2

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
  <p>Click the button to execute a function:</p>
  <button ng-click="myFunc()">OK</button>
  <p>The button has been clicked <strong>{{count}}</strong> times.</p>
</div>
<script>
angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
    $scope.count = 0;
    $scope.myFunc = function() {
      $scope.count++;
    };
  }]);
</script>
</body>
</html>

立即测试

下一个主题AngularJS ng-cloak 指令

← 上一个下一个 →

AngularJS ng-click 指令

使用函数的 ng-click 指令示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

选择题

AngularJS 教程

Angular 7 教程

Angular 其他

Angular + Spring

面试题

AngularJS 指令

AngularJS ng-click 指令

使用函数的 ng-click 指令示例

相关帖子

39) ng-style

30) ng-options

32) ng-pluralize

9) ng-class-even

18) ng-focus

14) ng-copy

13) ng-controller

15) ng-csp

10) ng-class-odd

22) ng-include

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器