Angularjs set input value – It is very simple to set the value attribute of the input field. Here in this tutorial we are going to explain how you can set the input field value in angularjs. You can also use our online editor to edit and run the code online.

Angularjs set input value | Example

Let us go step by step to set the input box value example –

JavaScript Part

JavaScript Part Contains the following part as below –

Html Part

Html Part contains the following html as below –

  
  
  Name 
  

  
  
     
 
 

Complete Part

Now let us combine Html and JavaScript Together to create full example like this –

 
 

  
  
  
        Name 

		

 

  

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

Angularjs get string length – You can get the string length using the length attribute. Here in this tutorial we are going to explain how you can get the length of string variable in angularjs. You can also use our online editor to edit and run the code online.

Angularjs get string length | Example

Let us go step by step to get the string length example –

JavaScript Part

JavaScript Part Contains the following part as below –

Html Part

Html Part contains the following html as below –

  
  
        Enter Text = 

		
Length = {{length}}
       
 
 

Complete Part

Now let us combine Html and JavaScript Together to create full example like this –

 
 

  
  
  
        Enter Text = 

		
Length = {{length}}
       
 
 

  
      

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

AngularJs count array items – You can get the array length using the length method. Here in this tutorial we are going to explain how you can get the length of array variable in angularjs. You can also use our online editor to edit and run the code online.

AngularJs count array items | Example

Let us go step by step to create the array length example –

JavaScript Part

JavaScript Part Contains the following part as below –

Html Part

Html Part contains the following html as below –

  
  

        Click To Get Length
 
 
Array = {{myArray}}
 
Length = {{length}}
 

Complete Part

Now let us combine both html and JavaScript parts –

 
 

  
  
  

        Click To Get Length
 
 
Array = {{myArray}}
 
Length = {{length}}
 

  
      
                                

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

AngularJs get checkbox value – While using the html form input elements we sometimes need checkboxes. It is very simple to get the selected(checked) checkbox value in angularjs. Here in this tutorial we are going to explain how you can get the selected checkbox value. You can also use our online editor to edit and run the code online.

AngularJs get checkbox value | Selected Checkbox | Example

Let us go step by step to get the checked checkbox value-

JavaScript Part

JavaScript Part Contains the following part as below –

Html Part

Html Part contains the following html as below –

  
  

        Checkbox1 : 

        Checkbox2 : 

        Checkbox3 : 

        Checkbox4 : 

  
    
        Get Value
 
 
Selected Checkboxes = {{selectedCheckboxes | json}}
Value1 = {{selectedCheckboxes.value1}}
Value2 = {{selectedCheckboxes.value2}}
Value3 = {{selectedCheckboxes.value3}}
Value4 = {{selectedCheckboxes.value4}}
 
 

Complete Part

Now let us combine both html and JavaScript parts –

 
 

  
  
  

        Checkbox1 : 

        Checkbox2 : 

        Checkbox3 : 

        Checkbox4 : 

  
    
        Get Value
 
 
Selected Checkboxes = {{selectedCheckboxes | json}}
Value1 = {{selectedCheckboxes.value1}}
Value2 = {{selectedCheckboxes.value2}}
Value3 = {{selectedCheckboxes.value3}}
Value4 = {{selectedCheckboxes.value4}}
 
 

  
      
                                                        

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

AngularJs get radio button value – While using the html form input elements we sometimes need radio button or even sometimes we need user to select the one option from the radio button. It is very simple to get the select radio button value in angularjs. Here in this tutorial we are going to explain how you can get the selected radio button value. You can also use our online editor to edit and run the code online.

AngularJs get radio button value

Let us go step by step-

JavaScript Part

JavaScript Part Contains the following part as below –

Html Part

Html Part contains the following html as below –

  
  

        Male: 

        Female : 

        
        Get Value
 
 
Selected Gender = {{selectedGender}}
 
 

Complete Part

Now let us combine both html and JavaScript parts –

 
 

  
  
  

        Male: 

        Female : 

        
        Get Value
 
 
Selected Gender = {{selectedGender}}
 
 

  
      

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

AngularJs get Form Input Value – Working with the forms in AngularJs we often need to get the form input values in controller. It is very easy to get the form input field values in controller. Here in this tutorial we are going to explain how you can get the form input field values in controller. You can use our online editor to edit and run the code online.

Angularjs get Form Input Value In Controller | Form Data Example

You can get the form data simply as below –

JavaScript Part :

JavaScript Part Contains the following script as below –

The above function imports the user object from the form. Here you can manipulate the object as per your need.

Html Part :

Html Part Contains the following html as below –

  
  

        Name: 

        Email : 

        Phone: 

		Location: 

        SAVE
 
 
User Data Json = {{userData | json}}
 
Name = {{userData.name}}
 
Email = {{userData.email}}
 
Phone = {{userData.phone}}
 
Location = {{userData.location}}
 
 
 

Complete Part :

Now let us combine both javascript and html part to create full example –

 
 

  
  
  

        Name: 

        Email : 

        Phone: 

		Location: 

        SAVE
 
 
User Data Json = {{userData | json}}
 
Name = {{userData.name}}
 
Email = {{userData.email}}
 
Phone = {{userData.phone}}
 
Location = {{userData.location}}
 
 

  
   

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

AngularJs Empty Element : There are many ways to empty the element’s content. You can use the empty method to remove the content of the element. Here in this tutorial we are going to use the .empty() method to empty the element. You can use our online editor to try and edit the code online.

AngularJs Empty Element Example

You can empty element simply as below –

JavaScript Part

JavaScript Part Contains the following script –

Html Part

Html Part Contains the following html-

  
  
 

Heading
Hello World!

 

Complete Part

Let us combine the both JavaScript and Html Part –

 
 

  
  
  
 

Heading
Hello World!

 

  
      

If you run the above example it will produce output something like this and if you click on the empty button it will clear the div content as below –

Angularjs remove html element from dom : There are many ways to remove the element from html dom(document object model). Here in this tutorial we are going to use the .remove() method to remove the element from the document object model.

Angularjs remove html element from dom

You can remove element from dom simply as below –

JavaScript Part

JavaScript Part Contains the following script –

Html Part

Html Part Contains the following html-

Complete Part

Let us combine the both JavaScript and Html Part –

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

AngularJs open link in new tab – You can use $window service to open a link in new tab in angularjs. It is very easy to open link in new tab using AngularJs. Here in this tutorial we are going to explain how you can use the $window service to open link in new tab. You can also use our online editor to edit and run the example code.

AngularJs open link in new tab

You can open a link in new tab using the following steps-

JavaScript Part –

JavaScript Part Contains the following script –

Html Part –

This Contains the html part of the example –

Complete Part – Html & JavaScript Both

Let us combine the javascript and html both part to create the complete example –

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