AngularJS ng-click指令详解及示例-慕源网

AngularJS ng-click指令，AngluarJS 中的ng-click 指令用于在元素被点击后需要执行的操作。它可用于显示/隐藏某些元素，也可以在单击按钮时弹出警报。

语法：

<element ng-click="expression"> 内容... </element>

示例 1：使用 ng-click 指令在单击元素后显示警告消息。

<!DOCTYPE html>
<html>
	
<head>
	<title>ng-click Directive</title>

	<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
	</script>
</head>

<body ng-app="geek" style="text-align:center">
	
	<h1 style="color:green">GeeksforGeeks</h1>
	<h2>ng-click Directive</h2>
	
	<div ng-controller="app">
		<button>
			<a href="" ng-click="alert()">
				Click Here
			</a>
		</button>
	</div>
	
	<script>
		var app = angular.module("geek", []);
		app.controller('app', ['$scope', function ($app) {
			$app.alert = function () {
				alert("This is an example of ng-click");
			}
		}]);
	</script>
</body>

</html>

输出：

点击按钮前：

点击按钮后：

示例二：使用 ng-click 指令在点击元素后显示一些内容。

<!DOCTYPE html>
<html>
	
<head>
	<title>ng-click Directive</title>

	<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
	</script>
</head>

<body ng-app="" style="text-align:center">
	
	<h1 style="color:green">GeeksforGeeks</h1>
	<h2>ng-click Directive</h2>
	
	<form name="form">
		<div ng-hide="isShow">
			Enter Name: <input type="text" required ng-model="Name" />
			
			<br><br>
			
			<input type="button" ng-disabled="form.$invalid"
					ng-click="isShow = true" value="Sign in" />
		</div>
		
		<div ng-show="isShow">
			Sign in successful.<br>
			<input type="button" ng-click="isShow = false;Name=''"
					value="Logout" />
		</div>
	</form>
</body>

</html>

输出：

点击按钮前：

点击按钮后：

AngularJS ng-click指令详解及示例

常见问题FAQ

慕源网普通

发表评论取消回复

常见问题FAQ

慕源网 普通

发表评论 取消回复

相关推荐

慕源网普通

发表评论取消回复