AngularJS ng-click指令用法详细介绍

【AngularJS ng-click指令用法详细介绍】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 hrefhttps://www.lsbin.com/= "" 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 = "https://www.lsbin.com/Sign in" /> < / div > < div ng-show = "isShow" > Sign in successful.< br > < input type = "button" ng-click = "isShow = false; Name=''" value = "https://www.lsbin.com/Logout" /> < / div > < / form > < / body > < / html >

输出如下：
在单击按钮之前：