En este artículo, estamos discutiendo cómo cambiar la ID de cualquier elemento dinámicamente usando AngularJS.
Enfoque 1:
- En este enfoque, se llama a una función cuando se hace clic en el botón, lo que cambia la ID del elemento a id-5 .
- Estamos llamando a una función en la variable de alcance y cambiando la ID de id-1 a id-5 .
Ejemplo 1:
HTML
<!DOCTYPE HTML>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
</script>
<script>
var myApp = angular.module("app", []);
myApp.controller("controller",
function($scope) {
$scope.id = 1;
$scope.IdChange = function() {
$scope.id = 5;
};
});
</script>
<style>
#id-1{
color: red;
}
#id-5{
color: green;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p>
Change ID dynamically
</p>
<div ng-app="app">
<div ng-controller="controller">
<div id="id-{{id}}">
Id of element is "id-{{id}}"
</div>
<br>
<button ng-click="IdChange()">
Click to Change ID
</button>
</div>
</div>
</body>
</html>
Producción:
Enfoque 2: en este enfoque, se llama a una función cuando se hace clic en el botón, lo que cambia la ID de una a otra. Estamos llamando a una función en la variable de alcance y cambiando la ID de id-0 a id-1, id-1 a id-2 e id-2 a id-0.
Ejemplo 2:
HTML
<!DOCTYPE HTML>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
</script>
<script>
var myApp = angular.module("app", []);
myApp.controller("controller", function($scope) {
$scope.id = 1;
$scope.IdChange = function() {
$scope.id = ($scope.id + 1)%3;
};
});
</script>
<style>
#id-0 {
color: white;
background: blue;
}
#id-1 {
color: white;
background: green;
}
#id-2 {
color: white;
background: red;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p>
Change ID dynamically
</p>
<div ng-app="app">
<div ng-controller="controller">
<div id="id-{{id}}">
Id of element is "id-{{id}}"
</div>
<br>
<button ng-click="IdChange()">
Click to Change ID
</button>
</div>
</div>
</body>
</html>
Producción:
Enfoque 3: en este enfoque, el ID del elemento se establece mediante un elemento <input>.
Ejemplo:
HTML
<!DOCTYPE HTML>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
</script>
<script>
var myApp = angular.module("app", []);
myApp.controller("controller", function($scope) {
$scope.id = 1;
$scope.IdChange = function() {
$scope.id = $scope.textval;
};
});
</script>
<style>
#id-0 {
color: white;
background: blue;
}
#id-1 {
color: white;
background: green;
}
#id-2 {
color: white;
background: red;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p>
Change ID dynamically
</p>
<div ng-app="app">
<div ng-controller="controller">
<div id="id-{{id}}">
Id of element is "id-{{id}}"
</div>
<br>
Enter ID: <input type="text" ng-model="textval" >
<br>
<br>
<button ng-click="IdChange()">
Click to Change ID
</button>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA