AngularJs Remove Item From Array : You can use array splice method to remove an item from AngularJs array. Here in this tutorial we are going to explain how to remove an item from AngularJs Array. You can also use our online tool to run and edit the code.

AngularJs Remove Item From Array

To Remove an item from AngularJs we first need to find the item index then use splice method to remove the item by the index. Here is an example of removing an item from an array.

JavaScript Part –

JavaScript Part Contains the following script –

Html Part-

Html Part Contains the following html –

  
  
Remove b from array = {{myArray}}
 
 

Complete Example-

Now let us combine both javascript and html parts. Here is the complete example –

 




 
 

  
  
  
Remove b from array = {{myArray}}
 
 

  
      

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

If you click on the “remove b” button it will remove b from the above array.

AngularJs Get Data From Json File : It is very common to get data from json file while working with AngularJs. Here in this tutorial we are going to explain how you can get data from json file. You can also use our online demo to get the data from the json file.

AngularJs Get Data From Json File

Let us first have overview on json file.

Json File

Json file is basically data exchange lightweight file. Here we have created a simple json file which contains the data in below format –

{"users":[{"id":"1","name":"John","email":"johnk@yopemail.com","phone":"121323232"},{"id":"2","name":"Kelly","email":"kellyk@yopemail.com","phone":"121212122"},{"id":"3","name":"Ryan","email":"ryank@yopemail.com","phone":"22222212"},{"id":"4","name":"Kojo","email":"kojao@yopemail.com","phone":"12144444"},{"id":"5","name":"Kinjal","email":"kinjal@yopemail.com","phone":"22555212"},{"id":"6","name":"Jonny","email":"jonny@yopemail.com","phone":"121334444"},{"id":"7","name":"Barak","email":"barak@yopemail.com","phone":"2444444512"},{"id":"8","name":"Uman","email":"uman@yopemail.com","phone":"12334444"}]}

You view the json data on the url – View Json File

Now we are going to read this json file using the AngularJs http get method.

Read Json File in AngularJS

Here we are going to describe this in two parts – Html and Js . Let us go step by step-

JavaScript Part

JavaScript part contains simple $http GET method to read the data from the given JSON Url.

Where http://runtest.tutorialsplane.com/json/getUsers.php is the JSON File url. Pass your JSON file url to get the data.

Html Part

Now let us display the data pulled from JSON URL.

    

    
Id
Name
    

    
{{data.id}}
    
{{data.name}}
    
    
 

On the same way you can get other fields from the JSON file.

Complete Code

Here is the full code of the example –

    

 

 


    

    
Id
Name
    

    
{{data.id}}
    
{{data.name}}
    
    
 

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

AngularJs get Url Parameters : While working with AngularJs we often need to get the url params. To get we need to import dependency ngRoute. You also need to enable html5mode to disable the hashbang urls. Here in this tutorial we are going to explain how you can get url parameter in angularjs, controller, view.

AngularJs get Url Parameters Syntax & Example

Steps to get the Url parameters are as –

Step 1 – Include ngRoute Dependency

Fist Include ngRoute Dependency –

angular.module('mygApp', ['ngRoute'])

Step 2 – Enable html5Mode

Now Enable html5mode to disable the hashbang(#) urls-

angular.module('mygApp', ['ngRoute'])
    .config(function ($locationProvider) {
        // enable HTML5mode to disable # urls
        $locationProvider.html5Mode(true);
    })

Step – Get Params

Suppose you have url something like this and you want to access the parameters name and id. //myApp.com/front/:name/:id

Now you can get the parameters as below –

Thus you can use this method to get url params easily.

Angularjs get current url : We sometimes need to get the current url in AngularJs. It is very easy and simple to get the current Url in AngularJs. $locaction.absUrl() is used to get the current Url. Here in this tutorial we are going to explain how you can get the current url in AngularJs. You can use our online editor to edit and run the example.

Angularjs get current url | Full url

You can use the $locaction.absUrl() method to get the current Url. This will give you the full url including the query strings. Here we have created a simple function to use this method and get the current url.

The above function will give you the full url example –www.example.com?q=abc&r=ghd. You can use this function as per your need.

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

AngularJs Change Url – Sometimes we need to change the url in angularjs. You can use $location.url to redirect from one page to another page. Here in this tutorial we are going to explain how you can redirect in angularjs. You can use our online editor to edit and run the code online.

AngularJs Change Url

You can change the current using the following syntax-

$location.url(‘/User/’+userId); will set the current url to the new url example – www.example.com/User/98. You can call the function – changeUrl(userId) on button click.

AngularJs Scroll to Bottom : There are many ways to scroll to the bottom of the page. You can use $anchorScroll and $location directives to scroll to the bottom of the page. Here in this tutorial we are going to explain how you can use this method to scroll to the bottom of the page. You can use out online editor to edit and run the code online.

AngularJs Scroll to Bottom

You can use the following method to scroll the bottom of the page.

In the above example we have created scrollToBottom() function in which we have used the service $location and $anchorScroll to scroll the bottom of the page.

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

AngularJs Reset Form Fields : Sometimes we need to reset form fields in AngularJs. It is very easy to reset form fields in Angularjs . Here in this tutorial we are going to explain how you can reset form fields in AngularJs. You can use our online editor to try & edit the code.

AngularJs Reset Form Fields Example

You can reset form fields in angularjs as below –

Html Part

Html Part Contains the form with two fields email and password which we will reset using the AngularJS.

JavaScript Part

Javascript part contains the following code to reset the form fields as below –

The above function will reset the two form fields email and passwords. On the same way you can clear more fields if your form has more fields.

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

AngularJs Toggle Class using ng-class – It is very simple to toggle the class the class using ng-class in angularJs. Here in this tutorial we are going to explain how you can add the toggle class functionality using ng-class. You can use our online editor to edit and see the output of the example.

AngularJs Toggle Class using ng-class

You can add the toggle class functionality using the ng-class as below –

 
  


  
  
  
{{ blueBg }}
ToggleBg
  
 

  
      

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

AngularJs get dropdown selected value : It is very simple to get the selected value from dropdown list. Here in this tutorial we are going to explain how you can get the selected value of dropdown list. You can use our online editor to see the output of the example.

AngularJs get dropdown selected value Example

 
  

  
  
  

    1
    2
    3
    4
    5

Selected Value = {{selectedVal}}
  
  
 

  
      

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