Automatic dropdown box loading using angularjsLearning Curve- Perfect Tutorial for the beginers | Learning Curve- Perfect Tutorial for the beginers

Populate a dropdown2 based on dropdown1

Here i am explaining the code for loading a state dropdown using country dropdown using angularjs and php.

Step1:create a database mytest_data and create 2 tables tbl_country and tbl_state. here country table is associated with
state table using country_id.

CREATE TABLE IF NOT EXISTS `tbl_country` (
`id` int(10) NOT NULL,
  `country_name` varchar(100) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;

INSERT INTO `tbl_country` (`id`, `country_name`) VALUES
(1, 'India'),
(2, 'UAE');

CREATE TABLE IF NOT EXISTS `tbl_state` (
`id` int(10) NOT NULL,
  `state_name` varchar(100) NOT NULL,
  `country_id` int(10) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;


INSERT INTO `tbl_state` (`id`, `state_name`, `country_id`) VALUES
(1, 'Karnataka', 1),
(2, 'Kerala', 1),
(3, 'Abhudhabi', 2),
(4, 'Sharja', 2);

CREATE TABLE IF NOT EXISTS `tbl_country` (

`id` int(10) NOT NULL,

`country_name` varchar(100) NOT NULL

) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;

INSERT INTO `tbl_country` (`id`, `country_name`) VALUES

(1, 'India'),

(2, 'UAE');

CREATE TABLE IF NOT EXISTS `tbl_state` (

`id` int(10) NOT NULL,

`state_name` varchar(100) NOT NULL,

`country_id` int(10) NOT NULL

) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;

INSERT INTO `tbl_state` (`id`, `state_name`, `country_id`) VALUES

(1, 'Karnataka', 1),

(2, 'Kerala', 1),

(3, 'Abhudhabi', 2),

(4, 'Sharja', 2);

create the tables using the above code.

Step2:create two php files for loading state and country

loadcountry.php and loadstate.php as follows,

<?php
$hostname = 'localhost';
$username = 'root';
$password = '';
$database = 'mytest_data';
$conn = mysql_connect($hostname,$username,$password);
if(!$conn)
{
die("Error in connecting to database");
}

$db = mysql_select_db($database,$conn);
if(!$db)
{
die("Error in connecting to selecting database");
}

$query_data = mysql_query("SELECT * from tbl_country",$conn);


$rows = array();
while($r = mysql_fetch_assoc($query_data)) {
  $rows[] = $r;
}
echo json_encode($rows);

?>

<?php

$hostname = 'localhost';

$username = 'root';

$password = '';

$database = 'mytest_data';

$conn = mysql_connect($hostname,$username,$password);

if(!$conn)

{

die("Error in connecting to database");

}

$db = mysql_select_db($database,$conn);

if(!$db)

{

die("Error in connecting to selecting database");

}

$query_data = mysql_query("SELECT * from tbl_country",$conn);

$rows = array();

while($r = mysql_fetch_assoc($query_data)) {

$rows[] = $r;

}

echo json_encode($rows);

<?php
$hostname = 'localhost';
$username = 'root';
$password = '';
$database = 'mytest_data';
$conn = mysql_connect($hostname,$username,$password);
if(!$conn)
{
die("Error in connecting to database");
}

$db = mysql_select_db($database,$conn);
if(!$db)
{
die("Error in connecting to selecting database");
}
$country_id=@$_GET['countryid'];
$query_data = mysql_query("SELECT * from tbl_state where country_id=$country_id",$conn);


$rows = array();
while($r = mysql_fetch_assoc($query_data)) {
  $rows[] = $r;
}
echo json_encode($rows);
?>

<?php

$hostname = 'localhost';

$username = 'root';

$password = '';

$database = 'mytest_data';

$conn = mysql_connect($hostname,$username,$password);

if(!$conn)

{

die("Error in connecting to database");

}

$db = mysql_select_db($database,$conn);

if(!$db)

{

die("Error in connecting to selecting database");

}

$country_id=@$_GET['countryid'];

$query_data = mysql_query("SELECT * from tbl_state where country_id=$country_id",$conn);

$rows = array();

while($r = mysql_fetch_assoc($query_data)) {

$rows[] = $r;

}

echo json_encode($rows);

Step3: create a file called index.php it contains the angular1 code for doing the dropdownbox loading and display.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="angularApp" ng-controller="CountryCtrl">
<p>Select the Country</p>
<select ng-model="selectedcountry" ng-change="update(selectedcountry);" ng-options="x.id as x.country_name for x in countrylist | orderBy:'country_name'">
<option value="">-- choose a country --</option>
</select>

<select ng-model="selectedstate"  ng-options="x.id as x.state_name for x in statelist | orderBy:'state_name'">
<option value="">-- choose a state --</option>
</select>
</div>
<script>
var app=angular.module('angularApp',[]);
app.controller('CountryCtrl', function($scope, $http) {
  $http.get("loadcountry.php").then(function (response) { 
      $scope.countrylist = response.data;
  });
  
  $scope.update = function(id){
$http.get("loadstate.php?countryid="+id).then(function (response) { 
      $scope.statelist = response.data;
	  
  });
 
  
  };
});
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<body>

<p>Select the Country</p>

<option value="">-- choose a country --</option>

</select>

<option value="">-- choose a state --</option>

</select>

</div>

var app=angular.module('angularApp',[]);

app.controller('CountryCtrl', function($scope, $http) {

$http.get("loadcountry.php").then(function (response) {

$scope.countrylist = response.data;

});

$scope.update = function(id){

$http.get("loadstate.php?countryid="+id).then(function (response) {

$scope.statelist = response.data;

});

};

});

</script>

</body>

</html>