如何在AngularJS中使用ng-click直接更新字段?

2021年4月12日10:54:18 发表评论 744 次浏览

可以使用自定义JavaScript函数通过ng-click更新任何字段。为此, 我们可以在HTML(通常是按钮)中创建一个可点击的对象, 然后附加一个ng-点击调用此自定义函数的指令。 AngluarJS中的ng-click指令用于单击元素时应用自定义行为。它可以用于显示/隐藏某些元素, 或者在单击按钮时可以弹出警报。

语法如下:

<element ng-click="expression"> Contents... </element>

示例1:此示例在单击按钮后调用一个函数来更改字段值。

<!DOCTYPE html>
<html ng-app = "example">
  
<head>
     <title>
         How to directly update a field
         by using ng-click in AngularJS?
     </title>
      
     <script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
     </script>
</head>
  
<body>
     <div ng-controller = "basicCntrl">
      
         <h1 style = "color:green">
             Hello {{name}}!
         </h1>
      
         <!-- on button click the change()
             function is called from $scope -->
         <button type = "button"
                 ng-click = "change()">
             Click!
         </button>
     </div>
      
     <script type = "text/javascript">
         var app = angular.module('example', []);
         app.controller('basicCntrl', function($scope) {
             $scope.name = "GFG";
             $scope.change = function() {
                 this.name = 'lsbin';
               }
         });
     </script>
</body>
  
</html>

输出如下:

在单击按钮之前:

如何在AngularJS中使用ng-click直接更新字段?1

单击按钮后:

如何在AngularJS中使用ng-click直接更新字段?2

该按钮调用更改更改变量名称的函数。该更改反映在页面上, 因为{{名称}}句法。对于更简单的逻辑(如示例1中所示的逻辑), 我们可以避免在ng-click指令内调用函数并更改变量。

示例2:本示例在ng-click指令中更改变量名称。

<!DOCTYPE html>
<html ng-app = "example">
  
<head>
     <title>
         How to directly update a field
         by using ng-click in AngularJS?
     </title>
      
     <script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
     </script>
</head>
  
<body>
     <div ng-controller = "basicCntrl">
          
         <h1 style = "color:green">
             Hello {{name}}!
         </h1>
          
         <!-- on button click the name is changed directly -->
         <button type = "button"
                 ng-click = "name='lsbin'">
             Click!
         </button>
     </div>
  
     <script type = "text/javascript">
         var app = angular.module('example', []);
          
         app.controller('basicCntrl', function($scope) {
             $scope.name = "GFG";
         });
     </script>
</body>
  
</html>

输出如下:

在单击按钮之前:

如何在AngularJS中使用ng-click直接更新字段?3

单击按钮后:

如何在AngularJS中使用ng-click直接更新字段?4

另外, 我们可以使用其他HTML标记来使ng-click起作用, 例如段落标记。

示例3:本示例使用一个段落标签来更改标题内容。

<!DOCTYPE html>
<html ng-app = "example">
  
<head>
     <title>
         How to directly update a field
         by using ng-click in AngularJS?
     </title>
      
     <script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
     </script>
</head>
  
<body>
     <div ng-controller = "basicCntrl">
          
         <h1 style = "color:green">
             Hello {{name}}!
         </h1>
          
         <!-- on paragraph click the name is changed directly -->
         <p ng-click = "name='lsbin'">
             Click!
         </p>
     </div>
  
     <script type = "text/javascript">
         var app = angular.module('example', []);
          
         app.controller('basicCntrl', function($scope) {
             $scope.name = "GFG";
         });
     </script>
</body>
  
</html>

输出如下:

在点击参数元素"点击"之前:

如何在AngularJS中使用ng-click直接更新字段?5

单击参数元素"点击"后:

如何在AngularJS中使用ng-click直接更新字段?6

木子山

发表评论

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