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

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

句法：

 Contents... 

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

  

    
        How to directly update a field
        by using ng-click in AngularJS?
    
      
    
    

  

    
      
        
            Hello {{name}}!
        
      
        
        
            Click!
        
    
      
    
        var app = angular.module('example', []);
        app.controller('basicCntrl',
        function($scope) {
            $scope.name = "GFG";
            $scope.change = function() {
                this.name = 'GeeksForGeeks';
              }
        });
    

  

输出：

• 在单击按钮之前：
  
• 单击按钮后：
  

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

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

  

    
        How to directly update a field
        by using ng-click in AngularJS?
    
      
    
    

  

    
          
        
            Hello {{name}}!
        
          
        
        
            Click!
        
    
  
    
        var app = angular.module('example', []);
          
        app.controller('basicCntrl',
          
        function($scope) {
            $scope.name = "GFG";
        });
    

  

输出：

• 在单击按钮之前：
  
• 单击按钮后：
  

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

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

  

    
        How to directly update a field
        by using ng-click in AngularJS?
    
      
    
    

  

    
          
        
            Hello {{name}}!
        
          
        
        
            Click!
        
    
  
    
        var app = angular.module('example', []);
          
        app.controller('basicCntrl',
          
        function($scope) {
            $scope.name = "GFG";
        });
    

  

输出：

• 在点击参数元素“点击”之前：
  
• 单击参数元素“单击”后：