AngularJS ng-click 指令

实例

每次单击按钮时,将计数变量增加一:

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body ng-app="">
  5. <p>点击按钮:</p>
  6. <button ng-click="count = count + 1" ng-init="count=0">OK</button>
  7. <p>按钮已经点击 {{count}} 次。</p>
  8. <p>此示例会在每次单击按钮时增加变量 "count" 的值。</p>
  9. </body>
  10. </html>

定义与用法

ng-click 指令告诉 AngularJS 在单击 HTML 元素时要做什么。


语法

  1. <element ng-click="expression"></element>

由所有 HTML 元素支持。


参数值

描述
expression单击元素时要执行的表达式

更多实例

实例

单击按钮时,以 AngularJS 的形式执行一个函数:

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body ng-app="myApp">
  5. <div ng-controller="myCtrl">
  6. <p>点击按钮运行一个函数:</p>
  7. <button ng-click="myFunc()">OK</button>
  8. <p>按钮已经点击 {{count}} 次。</p>
  9. </div>
  10. <script>
  11. angular.module('myApp', [])
  12. .controller('myCtrl', ['$scope', function($scope) {
  13. $scope.count = 0;
  14. $scope.myFunc = function() {
  15. $scope.count++;
  16. };
  17. }]);
  18. </script>
  19. </body>
  20. </html>

分类导航