可以使用自定义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>
输出如下:
在点击参数元素"点击"之前:
文章图片
单击参数元素"点击"后:
文章图片
推荐阅读
- 高级数据结构(K-ary堆原理和实现代码详解)
- C++中的纯虚函数和抽象类详细指南
- Node.js fs.readdirSync()方法用法示例
- 你需要知道的JavaScript ES2021特性
- 绿茶win8位系统下载
- windows7 64位旗舰ylmf下载
- bios设置图解图文详细教程
- 本地硬盘系统之家重装win7图解图文详细教程
- win7专业版系统安装图文详细教程