任务是使用angular使用点击事件动态创建按钮。在这些示例中, 当有人单击按钮时, 就会创建一个新按钮。
在AngularJS中创建按钮的最简单方法是使用ng-repeat指示。我们可以轻松地在按钮单击事件中关联重复逻辑。
语法如下:
<
element ng-repeat="variable in expression">
Contents... <
/element>
例子:这里我们有一个计数器变量, 用于保持DOM中当前存在的按钮计数。每按一次主按钮(GFG), 它就会增加1。增加的计数会导致ng-repeat生成一个新按钮。
<
!DOCTYPE html>
<
html ng-app = "myApp" >
<
head >
<
script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js" >
<
/ script >
<
/ head >
<
body ng-controller = "MyController" >
<
center >
<
h1 style = "color:green" >
lsbin
<
/ h1 >
<
button type = "button"
ng-click = "click(this)" >
GFG
<
/ button >
<
br >
<
!-- Dynamically created
button using repeat -->
<
button type = "button"
ng-repeat = "i in range(0, counter)" >
New button!
<
/ button >
<
/ center >
<
/ body >
<
script type = "text/javascript" >
var myApp = angular.module('myApp', []);
myApp.controller('MyController', ['$scope', function($scope) {
$scope.counter = 0;
$scope.click = function($scope) {
$scope.counter++;
}
$scope.range =
function(min, max, step) {
step = step || 1;
var input = [];
for (var i = min;
i <
max ;
i += step) {
input.push(i);
}
return input;
};
}]);
<
/script>
<
/ html >
输出如下:
【如何在Angular中使用click事件动态创建按钮()】当我们继续单击按钮时, DOM中的按钮数量不断增加:
文章图片
文章图片
推荐阅读
- jQuery append()方法用法介绍
- 如何在Ubuntu中设置cron作业
- 操作系统中的可变(或动态)分区
- + _运算符在JavaScript中是什么意思()
- 操作系统中的逻辑和物理地址详细介绍
- AngularJS ng-model指令用法详解
- AngularJS Include指令用法详细介绍
- window和mac笔记本怎么拼接屏幕及设置
- 教你3步实现HBuilder真机测试