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:
Last Updated :
08 Sep, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...