如何在一个ng-click指令中添加许多功能?

2021年3月12日13:34:25 发表评论 625 次浏览

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指令中添加许多功能?1

单击按钮后:

如何在一个ng-click指令中添加许多功能?2
如何在一个ng-click指令中添加许多功能?3

木子山

发表评论

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