How to set id attribute of an element dynamically using AngularJS ? - GeeksforGeeks

01 Oct, 2020
In this article, we are discussing how to change the ID of any element dynamically using AngularJS.
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:
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:
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:
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:
AngularJS-Basics
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Angular PrimeNG Dropdown Component
How to make a Bootstrap Modal Popup in Angular 9/8 ?
Angular 10 (blur) Event
How to create module with Routing in Angular 9 ?
How to setup 404 page in angular routing ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?