La tarea es crear un botón dinámicamente con un evento de clic usando angular. En estos ejemplos, cuando alguien hace clic en el botón, se crea un nuevo botón.
La forma más fácil de crear un botón en AngularJS es usar la directiva ng-repeat . Podemos conectar fácilmente una lógica de repetición dentro de un evento de clic de botón.
Sintaxis:
<element ng-repeat="variable in expression"> Contents... </element>
Ejemplo: aquí tenemos una variable de contador que mantiene el recuento de botones actualmente presentes en el DOM. aumenta en uno cada vez que se presiona el botón principal (GFG). el recuento aumentado da como resultado un nuevo botón generado por 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">
GeeksforGeeks
</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>
Salida: a medida que seguimos haciendo clic en el botón, la cantidad de botones sigue aumentando en el DOM:
