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

可以使用自定义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>

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

文章图片
单击按钮后：

文章图片
该按钮调用更改更改变量名称的函数。该更改反映在页面上, 因为{{名称}}句法。对于更简单的逻辑(如示例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直接更新字段（）】另外, 我们可以使用其他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>

输出如下：
在点击参数元素"点击"之前：