How to set id attribute of an element dynamically using AngularJS ?
In this article, we will see how to change the ID of any element dynamically using AngularJS, along with understanding its implementation through examples.
Approach 1: In this approach, a function is called when the button is clicked, which changes the ID of the element to id-5. We are calling a function on the scope variable and changing the ID from id-1 to id-5.
Example 1: This example describes setting the element’s id attribute dynamically in AngularJS.
HTML
<!DOCTYPE HTML> <html> <head> <script src= </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> |
Output:
Approach 2: In this approach, a function is called when the button is clicked, which changes the ID from one to another. We are calling a function on the scope variable and changing the ID from id-0 to id-1, id-1 to id-2, and id-2 to id-0.
Example 2: In this example, the element’s id attribute is utilized to change the styling property.
HTML
<!DOCTYPE HTML> <html> <head> <script src= </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> |
Output:
Approach 3: In this approach, the ID of the element is set by an <input> element.
Example 3: In this example, the <input> element is used to enter the id value that will be changed dynamically by clicking the button.
HTML
<!DOCTYPE HTML> <html> <head> <script src= </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> |
Output:
Please Login to comment...