任务是使用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 >输出如下：
当我们继续单击按钮时, DOM中的按钮数量不断增加：
