Open In App

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
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=
    </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:



Last Updated : 08 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads