如何在Angular中使用click事件动态创建按钮()

任务是使用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中的按钮数量不断增加:
如何在Angular中使用click事件动态创建按钮()

文章图片
如何在Angular中使用click事件动态创建按钮()

文章图片

    推荐阅读