How to set id attribute of an element dynamically using AngularJS ? Last Updated : 01 Aug, 2024 Comments Improve Suggest changes Like Article Like Report 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= "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> 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= "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> 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= "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> Output: Comment More infoAdvertise with us Next Article How to set id attribute of an element dynamically using AngularJS ? P PranchalKatiyar Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Basics AngularJS-Questions Similar Reads How to dynamically get the content height of a div using AngularJS ? In this article, we will see how to get the height of the content of a <div> dynamically using Javascript, & will understand its implementation through the illustrations. The content height of a div can dynamically get using the clientHeight property and scrollHeight property depending upo 3 min read How to push elements in an array using AngularJS ? Given an array and the task is to perform the push operation on the array using AngularJS. The arr.push() method is used to push one or more values into the array, & new values will add at the end of an array. This method changes the length of the array by the number of elements added to the arr 2 min read How to dynamically get the content width of a div using AngularJS ? In this article, we will see how to dynamically get the content width of a div using AngularJS, along with understanding its basic implementation through the examples. The content width of a div can dynamically get using clientWidth and scrollWidth properties depending upon the user's requirement. I 2 min read How to empty the content of an element using AngularJS ? In this article, we will see how to remove the content of an element in HTML DOM using AngularJS. This task can be accomplished by implementing the jQuery empty() method that removes all child nodes and their content for the selected elements. Syntax: element.empty();Parameter: This method does not 2 min read How to add Angular attributes to dynamically generated element with a function as the parameter ? AngularJS is a JavaScript-based framework. It can be used by adding it to an HTML page using a <script> tag. AngularJS helps in extending the HTML attributes with the help of Directives and binding of data to the HTML with expressions. An Angular Service is a broad category that consists of an 4 min read How to update an array element in AngularJS ? Given an array with an initial array of elements & the task is to update an array element using AngularJS. To update a particular item in an array, there are 2 ways, i.e., either by its value or by its index. Here, we will use the concept of the Property accessors method that is used to access t 2 min read How to set the input field value dynamically in AngularJS ? Given an input field and the task is to set the input field value dynamically with the help of AngularJS.Approach: A value is being set to the input field despite the user enter something or not. ng-click event is used to call a function that sets the value to 'This is GeeksForGeeks' with the help o 2 min read How to Create Button Dynamically with Click Event in Angular ? The task is to create a button dynamically with a click event using AngularJS, i.e., whenever someone clicks on the button then a new button gets created. The easiest way to create a button in AngularJS is to use the ng-repeat directive. We can easily hook up a repeat logic inside a button click eve 2 min read How to select an element by its class name in AngularJS? Given an HTML document and the task is to select an element by its className using AngularJS. The elements can be selected with the help of a class name using the document.querySelector() method that is used to return the first element that matches a specified CSS selector(s) in the document. Approa 2 min read How to hide an HTML element via a button click in AngularJS ? In this article, we will see how to use a toggle button feature to hide and display an element by button click in Angular. The toggle button is a user interface control that may be useful for situations when the user wants to switch between 2 states or conditions. For instance, in our smartphone, we 2 min read Like