Category: AngularJS

Most of the eCommerce sites e.g. Flipkart, Snapdeal, etc have a price range slider for searching purpose.

The user doesn’t have to enter price range manually.

It will automatically filter the list when the price is been changed by the user.

In this tutorial, I am implementing the similar type of functionality with AngularJS and PHP.

Using jQuery UI to create the slider.

Make Price Range Slider with AngularJS and PHP

AngularJS PHP

It is always a better idea to check the entered username exists or not if you are allowing the users to choose username while registration and wants it to be unique.

With this, the user will instantly know that their chosen username is available or not.

Check if username exists with AngularJS

AngularJS PHP

The autocomplete functionality gives the user suggestions based on its input. From there, it can select an option.

In the demonstration, I am creating a search box and display suggestion list whenever the user input value in the search box.

Set selected value to search box when an option gets selected.

For implementing this functionality I am using AngularJS and PHP.

Create autocomplete search with AngularJS and PHP

AngularJS PHP

The check uncheck all functionality mainly required when the long list of records available on the page and allowing the user to select multiple records to perform an action.

For example – Delete the selected user’s list, in this case, if require deleting all users then it needs to select one by one.

This can also be used on the limited number of list items.

I show you some of the examples for check uncheck all checkboxes with AngularJS.

Check uncheck all multiple checkboxes with AngularJS


If you know how to add or remove record to MySQL database table with jQuery AJAX then it’s been a lot easier for you to do with AngularJS.

Using PHP for handling requests and according to it execute the action and return response.

In the demonstration, I created a layout for entering new records and show the list of records in table layout with a delete button.

Add and remove record from MySQL Database with AngularJS


For upload file with AngularJS need to send the file by $http service and with the use PHP store the requested file to the server and return a response.

In the demonstration, I am creating two examples –

  • In the first, using JavaScript to select file,
  • And in the second, using custom directive

Then pass it as data in $http service for upload.

Upload file with AngularJS and PHP

AJAX AngularJS

With only using AngularJS it is not possible to get data from MySQL database because it only handles Client side requests.

You have to use any Server side language at backend which handles the request and returns response.

In AngularJS $http service is use to send AJAX request.

How to get data from MySQL with AngularJS - PHP


In this tutorial, we learn How you can sort table content on Table header click using AngularJS.

What we create?

We will create a Table structure which sort in Ascending or Descending order when table header get clicked by the user and add arrow symbol right to it based on sort ordering.


If you are from the jQuery background for hiding and showing element you generally use show() and hide() function or may be used css() function when an event occurs.

AngularJS provide directives for it also i.e, ng-hide and ng-show.


In HTML you cannot embed one HTML page within another HTML page, In PHP, there is include or require statement for it.  Which you has to add on the section following with file name where you want to insert the content.

Where can I use it ?

Using embedding, you can reuse the same code within another page and it saves our time. For example, you are creating a project which contains the number of pages, all pages need the common header and footer. So, you have to write header and footer code on all pages and later in future, you need to add one more menu item in the header so, you go to all pages and add a new item to it.

For solving these types of problem you can create the separate file of it and include in your where it required.

AngularJS allow us to embed HTML page within another HTML page using ng-include directive.

ng include directives in angularjs