ng-click指令单击一个元素时, AngluarJS中的int用于应用自定义行为。它可以用于显示/隐藏某些元素, 或者在单击按钮时可以弹出警报。
语法如下：
<element ng-click="expression"> Contents... </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" >lsbin</ 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 >输出如下：
在单击按钮之前：
单击按钮后：
范例2：本示例使用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" >lsbin</ 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 >输出如下：
在单击按钮之前：
单击按钮后：
