如何使用AngularJS动态设置元素的id属性？

在本文中，我们将讨论如何使用AngularJS动态更改任何元素的ID。

方法1：

• 在这种方法中，单击按钮时会调用一个函数，该函数会将元素的ID更改为id-5 。
• 我们在作用域变量上调用一个函数，并将ID从id-1更改为id-5 。

范例1：

HTML

 
  
  

    
    
      
    
        var myApp = angular.module("app", []);
            myApp.controller("controller", 
            function($scope) {
            $scope.id = 1;
            $scope.IdChange = function() {
                $scope.id = 5;
            };
        });
     
  
    
        #id-1{ 
            color: red;
        }
        #id-5{
            color: green;
        }
    
   
  

      
        GeeksForGeeks  
     
      
    
        Change ID dynamically
    
  
      
          
            
                Id of element is "id-{{id}}" 
            
            
            
                Click to Change ID
              
          
     
   
  

输出：

方法2：在这种方法中，单击按钮时会调用一个函数，该函数会将ID从一个更改为另一个。我们正在作用域变量上调用一个函数，并将ID从id-0更改为id-1，从id-1更改为id-2 ， 和id-2到id-0。

范例2：

的HTML

 
  
  

    
    
      
    
        var myApp = angular.module("app", []);
            myApp.controller("controller", function($scope) {
            $scope.id = 1;
            $scope.IdChange = function() {
                 $scope.id = ($scope.id + 1)%3;
            };
        });
     
    
        #id-0 { 
          color: white;
          background: blue;
        }
        #id-1 {
          color: white;
          background: green;
        }
        #id-2 {
          color: white;
          background: red;
        }
    
   
  

      
        GeeksForGeeks  
     
  
      

    Change ID dynamically
    
  
      
          
            
                Id of element is "id-{{id}}" 
            
            
            
                Click to Change ID
              
          
     
   
  

输出：

方法3：在这种方法中，元素的ID由元素设置。

例子：

的HTML

 
  
  

    
    
  
    
        var myApp = angular.module("app", []);
            myApp.controller("controller", function($scope) {
            $scope.id = 1;
            $scope.IdChange = function() {
                 $scope.id = $scope.textval;
            };
        });
     
    
        #id-0 { 
          color: white;
          background: blue;
        }
        #id-1 {
          color: white;
          background: green;
        }
        #id-2 {
          color: white;
          background: red;
        }
    
   
  

      
        GeeksForGeeks  
     
  
      

    Change ID dynamically
    
  
      
          
            
                Id of element is "id-{{id}}" 
            
            
            Enter ID: 
            
            
            
                Click to Change ID
              
          
     
   
  

输出：