Hello friends in this tutorial we are going to discuss how to fill dropdown list box dynamically by using AngularJS framework with php programming without page refresh. For discuss this things we will define two dropdown list, in first select box we will fill country name which is get from mysql table by using AngularJS and in second dropdown list we will fill state name of first selected dropdown list country which is also get from mysql table by using Angular Javascript with php programming language. So, in this video we have filled country select box by angular javascript function, this function send request to php script and that script send back data and filled country select box, then after we want to load state name of selected country in state selectbox, so for this we have add function under country selectbox on change event so, when we have select any country, then this function is called and this function again send request to php script and it send back data and by angular javascript directive we have display state name under state select box. So, this way we have developed dynamic select box by using angular javascript framework with php programming.
Source Code
Database
--
-- Table structure for table `country`
--
CREATE TABLE IF NOT EXISTS `country` (
`country_id` int(11) NOT NULL AUTO_INCREMENT,
`country_name` varchar(255) NOT NULL,
PRIMARY KEY (`country_id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;
--
-- Dumping data for table `country`
--
INSERT INTO `country` (`country_id`, `country_name`) VALUES
(1, 'United States of America'),
(2, 'Canada'),
(3, 'Australia');
-- --------------------------------------------------------
--
-- Table structure for table `state`
--
CREATE TABLE IF NOT EXISTS `state` (
`state_id` int(11) NOT NULL AUTO_INCREMENT,
`country_id` int(11) NOT NULL,
`state_name` varchar(255) NOT NULL,
PRIMARY KEY (`state_id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;
--
-- Dumping data for table `state`
--
INSERT INTO `state` (`state_id`, `country_id`, `state_name`) VALUES
(1, 1, 'Alabama'),
(2, 1, 'Arizona'),
(3, 1, 'California'),
(4, 2, 'Alberta'),
(5, 2, 'Manitoba'),
(6, 2, 'Ontario'),
(7, 3, 'Queensland'),
(8, 3, 'Tasmania'),
(9, 3, 'Victoria');
index.php
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Dynamic Dropdown list using AngularJS in PHP</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>
<br /><br />
<div class="container" style="width:600px;">
<h3 align="center">Dynamic Dropdown list using AngularJS in PHP</h3>
<br />
<div ng-app="myapp" ng-controller="usercontroller" ng-init="loadCountry()">
<select name="country" ng-model="country" class="form-control" ng-change="loadState()">
<option value="">Select Country</option>
<option ng-repeat="country in countries" value="{{country.country_id}}">{{country.country_name}}</option>
</select>
<br />
<select name="state" ng-model="state" class="form-control">
<option value="">Select State</option>
<option ng-repeat="state in states" value="{{state.state_id}}">
{{state.state_name}}
</option>
</select>
</div>
</div>
</body>
</html>
<script>
var app = angular.module("myapp",[]);
app.controller("usercontroller", function($scope, $http){
$scope.loadCountry = function(){
$http.get("load_country.php")
.success(function(data){
$scope.countries = data;
})
}
$scope.loadState = function(){
$http.post("load_state.php", {'country_id':$scope.country})
.success(function(data){
$scope.states = data;
});
}
});
</script>
load_country.php
<?php
//load_country.php
$connect = mysqli_connect("localhost", "root", "", "testing");
$output = array();
$query = "SELECT * FROM country ORDER BY country_name ASC";
$result = mysqli_query($connect, $query);
while($row = mysqli_fetch_array($result))
{
$output[] = $row;
}
echo json_encode($output);
?>
load_state.php
<?php
//load_state.php
$connect = mysqli_connect("localhost", "root", "", "testing");
$output = array();
$data = json_decode(file_get_contents("php://input"));
$query = "SELECT * FROM state WHERE country_id='".$data->country_id."' ORDER BY state_name ASC";
$result = mysqli_query($connect, $query);
while($row = mysqli_fetch_array($result))
{
$output[] = $row;
}
echo json_encode($output);
?>
Hello i'd like to know in the sentences:
ReplyDeleteng-repeat="country in countries"
who is country? the column called by the function loadCountry on init?
and who is countries?: a new variable for temporal?
Hello, nice example help me a lot. I also need to populate the select list with a list of available hours to set up a date, I was trying to use an array with the available hours, but doesn't seems to work. I've been looking all over for an example, but all I have found is a simple list set up in an array.
ReplyDeleteHello nice example thank you very much, helped me a lot. As I advance into my project, now I need to populate a select list with the available hours to schedule an appointment. I tried ot return an array with the information, but nothing is showed up. I've been looking for an example that help me out, but all I've found is a simple list set up in an array.
ReplyDeleteHow to make default selected any particular option?
ReplyDeleteI really appreciate the information shared above. It’s of great help. MaxMunus provides Remote Support For Corporate and for Individuals. If anyone is facing any issue in his project of # ANGULAR JS we can support them remotely , kindly contact us http://www.maxmunus.com/contact
ReplyDeleteMaxMunus Offer World Class Industry best Consultant on# ANGULAR JS. We provide end to end Remote Support on Projects. MaxMunus is successfully doing remote support for countries like India, USA, UK, Australia, Switzerland, Qatar, Saudi Arabia, Bangladesh, Bahrain, and UAE etc.
Saurabh
MaxMunus
E-mail: saurabh@maxmunus.com
Skype id: saurabhmaxmunus
Ph:(0) 8553576305/ 080 - 41103383
http://www.maxmunus.com
very nice can you please add the download pack
ReplyDeletegood
ReplyDelete