Set id attribute of element in AngularJs


Set id attribute of element in AngularJs : You can set/ change the element’s id dynamically using scope variable in AngularJs. Here in this tutorial we are going to explain how you can set the id attribute of an element using angularjs. You can use our online editor to see the output of the example.


How to Set id attribute of element in AngularJs | Change Id Dynamically

You can Set/Change the id attribute of element in AngularJs simply as below –

Set id attribute of element in AngularJs Example:

<!DOCTYPE html>
<html lang="en">
<head>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
 <script>
var myApp = angular.module("myApp", []);
 myApp.controller("myController", function($scope) {
 $scope.id = 1;
$scope.changeId = function() {
    $scope.id = $scope.id+1;
};
});
</script> 
</head>
<body>  
<div ng-app="myApp">  
<div ng-controller="myController">  
<div id="my-id-{{id}}">Div Id is "my-id-{{id}}" </div>
<button ng-click="changeId()">Change Id </button>  
</div>  
</div> 

</body>  
</html>      


Try it »

The above example will change the id of html element dynamically. When you click on the button it will change the button id with scope variable.

If you run the above example it will produce the output something like this –

Set id attribute of element in AngularJs


Advertisements

Add Comment

📖 Read More