AngularJS populate Dynamic Dependent dropdown in PHP

Today, We want to share with you AngularJS populate Dynamic Dependent dropdown List using PHP MySQLi.In this post we will show you Dynamic Dropdown list using AngularJS with PHP, hear for Dynamic and Dependent Drop Down List using AJAX we will give you demo and example for implement.In this post, we will learn about How to Auto-populate Dropdown with AngularJS and PHP with an example.

AngularJS populate Dynamic Dependent dropdown List using PHP MySQLi

There are the Following The simple About AngularJS populate Dynamic Dependent dropdown List using PHP MySQLi Full Information With Example and source code.

As I will cover this Post with live Working example to develop How to Auto-populate Dropdown with AngularJS and PHP, so the dynamic dropdown in angularjs for this example is following below.

Also Read :  Automatically Laravel Create dynamic generate sitemap

Step 1: Create Tables

categories table query:

CREATE TABLE IF NOT EXISTS `categories` (
  `id` int(11) NOT NULL,
  `name` varchar(155) NOT NULL,
  `cr_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  `up_date` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00'
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

subcategories table query:

CREATE TABLE IF NOT EXISTS `subcategories` (
  `id` int(11) NOT NULL,
  `product_id` int(12) NOT NULL,
  `name` varchar(155) NOT NULL,
  `cr_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  `up_date` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00'
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Step 2: Create HTML interface

index.php

<!DOCTYPE html>
 <html>  
  <head>  
       <title>PHP AngularJS populate dynamic dropdown example - pakainfo.com</title>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>  
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
  </head>  
  <body>  
     <div class="pakainfo container" style="width:800px;">  
          <h3 align="center">PHP AngularJS populate dynamic dropdown example - pakainfo.com</h3>  
          <br />  
          <div ng-app="memberApp" ng-controller="membercontroller" ng-init="loadCategory()">  
             <select name="category" ng-model="category" class="form-control" ng-change="loadSubCategory()">  
                  <option value="">Select category</option>  
                  <option ng-repeat="category in categories" value="{{category.id}}">{{category.name}}</option>  
             </select>  
             <br />  
             <select name="subcat" ng-model="subcat" class="form-control">  
                  <option value="">Select subcat</option>  
                  <option ng-repeat="subcat in subcategories" value="{{subcat.id}}">  
                       {{subcat.name}}  
                  </option>  
             </select>  
          </div>  
		  <a href="https://pakainfo.com/" target="_blank" alt="pakainfo" title="pakainfo">Free Download Example - Pakainfo.com</a>
     </div>  
  </body>  
 </html>  
 <script>  
 var app = angular.module("memberApp",[]);  
 app.controller("membercontroller", function($scope, $http){  
      $scope.loadCategory = function(){  
           $http.get("load_category.php")  
           .success(function(data){  
                $scope.categories = data;  
           })  
      }  
      $scope.loadSubCategory = function(){  
           $http.post("load_subcategory.php", {'product_id':$scope.category})  
           .success(function(data){  
                $scope.subcategories = data;  
           });  
      }  
 });  
 </script>

Step 3: Create PHP API SERVER SIDE files

load_category.php

<?php  
	 $db_con = mysqli_connect("localhost", "root", "[email protected]", "myDBName");  
	 $results = [];  
	 $query = "SELECT * FROM categories ORDER BY name ASC";  
	 $result = mysqli_query($db_con, $query);  
	 while($row = mysqli_fetch_array($result))  
	 {  
	      $results[] = $row;  
	 }  
	 echo json_encode($results);  
?>  

load_subcategory.php

<?php  
	 $db_con = mysqli_connect("localhost", "root", "[email protected]", "myDBName");   
	 $results = [];  
	 $data = json_decode(file_get_contents("php://input"));  
	 $query = "SELECT * FROM subcategories WHERE product_id='".$data->product_id."' ORDER BY name ASC";  
	 $result = mysqli_query($db_con, $query);  
	 while($row = mysqli_fetch_array($result))  
	 {  
	      $results[] = $row;
	 }  
	 echo json_encode($results);  
?>

Angular 6 CRUD Operations Application Tutorials

Read :

Also Read :  Hello World with ASP.NET Core - Install ASP.NET Core steps

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about AngularJS populate Dynamic Dependent dropdown List using PHP MySQLi.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Recommended For You.

Ckeditor required field validation using Jquery
Today, We want to share with you Ckeditor required field validation using Jquery.In this post we will show you Validate

Add a Comment

Your email address will not be published. Required fields are marked *