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

2021年3月19日19:11:41 发表评论 1,174 次浏览

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 >

输出如下:

在单击按钮之前:

ngclick

单击按钮后:

ngclick

范例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 >

输出如下:

在单击按钮之前:

ngclick

单击按钮后:

ngclick

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: