AngularJS Dynamic dropdown ng options filter Example
Today, We want to share with you AngularJS Dynamic dropdown ng options filter Example.In this post we will show you angularjs populate dropdown from database, hear for dynamic dropdown in angularjs example we will give you demo and example for implement.In this post, we will learn about country state city drop down list in angularjs with an example.
AngularJS Dynamic dropdown ng options filter
first of all I simple need to make two tables “teachers” and “studets”. We can follow both database tables simple run this mysql query for make tables.
Step 1: Make Database Tables
teachers table query:
CREATE TABLE IF NOT EXISTS `teachers` ( `id` int(11) NOT NULL, `name` varchar(155) NOT NULL, `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, `updated_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00' ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
studets table query: create a table
CREATE TABLE IF NOT EXISTS `studets` ( `id` int(11) NOT NULL, `teach_id` int(12) NOT NULL, `name` varchar(155) NOT NULL, `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, `updated_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00' ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Step 2: Create index.php file
index.php
<!DOCTYPE html>
<html>
<head>
<title>PHP AngularJS populate dynamic dropdown example - infinityknow.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="container" style="width:500px;">
<h3 align="center">PHP AngularJS populate dynamic dropdown example - infinityknow.com</h3>
<br />
<div ng-app="infinityApp" ng-controller="schoolcontroller" ng-init="loadTeachers()">
<select name="state" ng-model="state" class="form-control" ng-change="loadStudents()">
<option value="">Select state</option>
<option ng-repeat="state in teacher" value="{{state.id}}">{{state.name}}</option>
</select>
<br />
<select name="student" ng-model="student" class="form-control">
<option value="">Select student</option>
<option ng-repeat="student in student" value="{{student.id}}">
{{student.name}}
</option>
</select>
</div>
</div>
</body>
</html>
<script>
var app = angular.module("infinityApp",[]);
app.controller("schoolcontroller", function($scope, $http){
$scope.loadTeachers = function(){
$http.get("teachers.php")
.success(function(data){
$scope.teacher = data;
})
}
$scope.loadStudents = function(){
$http.post("students.php", {'teach_id':$scope.state})
.success(function(data){
$scope.student = data;
});
}
});
</script>
Step 3: Create API files
teachers.php
<?php
$connect = mysqli_connect("localhost", "root", "password", "atmiya25");
$output = [];
$query = "SELECT * FROM teachers ORDER BY name ASC";
$result = mysqli_query($connect, $query);
while($row = mysqli_fetch_array($result))
{
$output[] = $row;
}
echo json_encode($output);
?>
students.php
<?php
$connect = mysqli_connect("localhost", "root", "password", "atmiya25");
$output = [];
$data = json_decode(file_get_contents("php://input"));
$query = "SELECT * FROM studets WHERE teach_id='".$data->teach_id."' ORDER BY name ASC";
$result = mysqli_query($connect, $query);
while($row = mysqli_fetch_array($result))
{
$output[] = $row;
}
echo json_encode($output); //results all
?>
jQuery 15 Powerful Tips and Tricks for Developers and Web Designer
Read :
Summary
You can also read about AngularJS, ASP.NET, VueJs, PHP.
I hope you get an idea about PHP AngularJS populate dynamic dropdown example.
I would like to have feedback on my Infinityknow.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.
C# Collections Tutorial with Examples
Angular Datepicker Directive Example with Demo
