AngularJs update table Row – Sometimes we need to edit/update table row in AngularJs. It is quite easy to update angulaJs Table rows. We have tried to create most common and simple example to understand how we can edit inline the row. Here in this tutorial we are going to explain and create an example to demonstrate- how you can update table rows in AngularJs. You can use our online editor to edit and run the code online.

AngularJs update table Row | Edit Row | Modify Row Example | Demo

It is very easy to edit table rows in AngularJs. Here we are going to create the edit/update functionality using the AngularJs. We will use two templates to show the editable rows and other for the editing the text.

Html Part:

Html part contains the following part –

  

{{message}} 

Name
Country





    

 

Here we have created two templates – 1. – To display the table row. 2. Display edit mode of the row. Three functions are used here to edit, save and cancel functionality which we have defined in javascript part. Now let us see the javascript part.

Javascript Part:

JavaScript part contains the following part –

This part contains the definition of the functions used in edit, save and cancel functionality.

Complete Part : JavaScript & Html Example

Now let us combine the both parts to create a full working example –

 
 

  
  

{{message}} 

Name
Country





    

 

  
 

Now everything is ready just run the above example to see the demo. If you run the above example it will produce the output something like this –

AngularJs pass value to ng-click function inside ng-repeat – We sometimes need to pass parameters to ng-click inside the ng-repeat. It is very simple to pass variables to the ng-click function. Here in this tutorial we are going to explain how you can parameters to the ng-click function. You can use our online editor to edit and run the code online.

AngularJs pass value to ng-click function inside ng-repeat

You can pass the values to the ng-click functions simply as below-

 
 

  
  

{{message}} 

Id
Name

      
{{content.id}}
 
{{content.name}}
	  
Remove



 

  
 

Now everything is ready just run the above example to see the demo. If you run the above example it will produce the output something like this –

AngularJs Remove Table Row – It is very easy to remove/delete the row from table, Unlike jQuery or other framework you don’t need to put much effort to remove the existing row in table. Here in this tutorial we are going to explain how you can remove the table row in AngularJs. You can use our online editor to edit and run the code online.

AngularJs Remove Table Row | Delete Table Row | Example | Demo

It is very simple to remove table row. Here we have create a simple function which will remove the row from the table.

 
 

  
  

{{message}} 

Sample Table

      
{{content}}
	  
Remove



 

  
 

Now everything is ready just run the above example to see the demo. If you run the above example it will produce the output something like this –

AngularJs Add Table Row – It is very easy to add/append a new row in table, Unlike jQuery or other framework you don’t need to put much effort to append new row in table. Here in this tutorial we are going to explain how you can add/append a new table row in AngularJs. You can use our online editor to edit and run the code online.

AngularJs Add Table Row | Append a New Row | Example | Demo

To append/add a new row in a table you don’t need to add the tr, td html tags to add new row. You can do it very easily if you have basic knowledge of AngularJs. You have to just update the object/array used in table. Let us create a simple example to understand this functionality.

 
 

  
  
 

Sample Table

      
{{content}}



 Add New Row
 

  
 

Now everything is ready just run the above example to see the demo. If you run the above example it will produce the output something like this –

AngularJs Get Browser Viewport Dimensions : We can get the browser viewport height and width using the JavaScript. Here in this tutorial we are going to explain how you can get the browser Viewport height and width using the JavaScript. You can use our online editor to edit and run the code online.

AngularJs Get Browser Viewport Dimensions Using JavaScript

You can use the following JavaScript to get the browser’s viewport height and width as below-

 
 

  
  
 

 Get Dim

 Height = {{height}}PX

 Width = {{width}}PX


 

  
      

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

Remove Duplicates From Array in AngularJs : Duplicate values in any array sometimes creates problem so we need some check which can remove the duplicate values from AngularJs Array. We can use pure javascript filter method to remove duplicate values. Here in this tutorial we are going to explain how you
can remove duplicate values from an array. You can also use our online editor to edit and run the code online.

Remove Duplicates From Array in AngularJs

First we need an array which have duplicate values so we will create an array with duplicate values and then process to remove duplicate values.

 
 

  
  
 
 Array With Duplicate Values = {{exampleArray}}
 Click to Remove Duplicates Array .
 Remove Duplicates

 Final Array = {{result}}


 

  
      
                                                                                    

If you run the above example it will remove the duplicate values from Array. The output of the above example will be something like this –

Empty Array In AngularJs JavaScript – We often need to clear array while working with arrays in AngularJs. It is very simple to clear array in AngularJs. You can just initialize the array to clear it. Here in this tutorial we are going to explain how to you can clear array items in AngularJs. You can also use our online editor to edit and run the code online.

How to Empty Array In AngularJs JavaScript | Clear Array | Remove All Items Of Array

If you want to remove all items of array in AngularJs just initialize the array as below –

 
 

  
  
 
 
 Click to clear Array .
 Clear Array

 Array = {{exampleArray}}


 

  

If you click on the clear button it will clear the array exampleArray and it will initialize the array again.

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

AngularJs Check if a key exists in an object : There are many ways to check whether a key value exists in an object or not. You can use pure JavaScript to check a key. Here in this tutorial we are going to explain how you can check that a key exists in an object or not. You can use our online editor to edit and run the code online.

AngularJs Check if a key exists in an object Example

You can simply use the (“key” in obj1) to check a key in an object it will return false if the key does not exist in object else it will return true. Here is an example to check key in javascript/angularjs object.

  


 
 

  
  
  
    

    Check Key Exists
	

	Result = {{result}}

 

  
               

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

AngularJs Decode URL String Example : We can use the javascript inbuilt function decodeURIComponent(uri), encodeURI(uri) or escape(uri) to decode the uri string. Here in this tutorial we are going to explain how you can decode the uri string with example and online demo.

AngularJs Encode URL| URI Component | JavaScript | Example

Let us create a simple example to use the function dcodeURIComponent(uri) to decode the uri component.

 
 

  
  
  
    Decode URL
	

	URL1 = {{url1}}

	URL2 = {{url2}}
 

  
                                                                                                                

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