ng-click指令
单击元素时, AngluarJS中的e用于应用自定义行为。它可以用于显示/隐藏某些元素, 或者在单击按钮时可以弹出警报。的
ng-click指令
是AngularJS中使用的非常方便的工具。单击HTML时,
ng-click
指令告诉AngularJS脚本该怎么做。
在本文中, 我们将学习如何通过一次单击就可以为传递的ng-click指令获取许多功能。
语法如下:
<
element ng-click="expression1(), expression2(), expression3()">
<
/element>
关键是添加分号(; )或逗号(, )。所有功能必须用(; )或(, )分隔。 HTML中的所有元素均支持此语法。它基本上是一个表达式, 单击该表达式即可执行。
例子:此示例显示了如何在ng-click中添加多个功能。
<
!DOCTYPE html>
<
html >
<
head >
<
title >
How to add many functions in one ng-click?
<
/ title >
<
script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" >
<
/ script >
<
body ng-app = "myApp" >
<
h1 style = "color:green;
" >
lsbin
<
/ h1 >
<
strong >
How to add many functions in one ng-click?
<
/ strong >
<
div ng-controller = "myCtrl" >
<
p >
Please click the below button to see the working:<
/ p >
<
!-- To write multiple functions - write the functions
and separate them by the semicolon (;
) -->
<
button ng-click = "myFunc();
popper();
" >
Click Here!
<
/ button >
<
p >
The button has been clicked {{count}} times.<
/ p >
<
/ div >
<
script >
angular.module('myApp', []).controller('myCtrl', ['$scope', function($scope) {
$scope.count = 0;
// first function
$scope.myFunc = function() {
$scope.count++;
// Second function
$scope.popper = function() {
alert('lsbin! Click again to increase count');
};
};
}]);
<
/ script >
<
/ body >
<
/ html >
输出如下:
在单击按钮之前:
文章图片
【如何在一个ng-click指令中添加许多功能()】单击按钮后:
文章图片
文章图片
推荐阅读
- mongodb高阶(索引创建、聚合查询、复制集、分片、创建备份和部署)
- 计算从mXn矩阵的左上到右下的所有可能路径
- 算法设计(打印最长的子字符串而不重复字符)
- Python如何将字典作为关键字参数传递(示例)
- 如何在JavaScript中实现消除抖动(代码实现示例)
- PHP常量用法详细教程和代码示例
- JavaScript中的多维数组用法指南
- OOP编程(Java中的继承详细指南)
- 多线程中的Java线程优先级介绍和代码实例