Drop down select box Options from MySQL database table using Angular

Selected Student = {{students}}

The above selected student will be displayed.
Here is the code for that.

<div ng-app="my_app" ng-controller="my_ctrl">
<select ng-model="students" ng-options="opt for opt in details"  >
</select>
<span>Selected Student = {{students}}</span> 
</div>

<script>
var app = angular.module('my_app', []);
app.controller('my_ctrl', function($scope, $http) {
 $scope.details=['Alex','Ronn','Ravi','John']	  
});
</script>

Using JSON formatted options

In above code we have used one array to show the options, we can also use JSON formatted key value pairs as options.

$scope.details=[{"id":"1","name":"John Deo","class":"Four","mark":"75"},
{"id":"2","name":"Max Ruin","class":"Three","mark":"85"},
{"id":"3","name":"Arnold","class":"Three","mark":"55"},
{"id":"4","name":"Krish Star","class":"Four","mark":"60"},
{"id":"5","name":"John Mike","class":"Four","mark":"60"}]

DEMO: Options from JSON formatted data

Using MySQL database data as options

Here we are collecting options from the data of our student table. This table is available in our sample MySQL database. We used PDO to connect to our MySQL database and collecting the records.
DEMO: Options from MySQL database table
Here is the code of our student-data.php file

Using PDO

The variable $dbo is declared inside the database connection file config.php, read more on PDO connection and config file here.

<?php
require "config.php"; // database connection 

$sql="SELECT  id, name ,class ,mark FROM student LIMIT 0,10"; 
$row=$dbo->prepare($sql);
$row->execute();
$result=array('student_data'=>$row->fetchAll(PDO::FETCH_ASSOC));

echo json_encode($result); 
?>

You can check the output ( in JSON format ) of student-data.php file here.

On Change event of drop down list

Read the ID value when the selection is changed in above drop down list and then display the ID value.
DEMO: OnChange event and displaying Selected Option value
Here is the change in code.

<div ng-app="my_app" ng-controller="my_ctrl">
<select ng-model="students" ng-options="x.name for x in details"  ng-change="onChange()" >
</select>
<span>Selected Student = {{students}}</span> , 
<span>Selected Mark = {{students.mark}}</span>
</div>

<script>
var app = angular.module('my_app', []);
app.controller('my_ctrl', function($scope, $http) {
  $http.get("student-data.php") // data source for options 
  .then(function (response) {$scope.details = response.data.student_data;});
 $scope.onChange = function()
{
 var id=$scope.students.id;
 //alert(id);
}
  
});
</script>

OnChange event and Passing Data to Back end script

We will pass the selected id and name to a back end script in PHP and then return the same with additional message. Our PHP script will receive id and name and then return the string with additional string added to this.
DEMO: onChange Event to post selected option to back end script
We have to post the data ( selected from the drop down list ) and then receive the response from the PHP page and display the same.
This is our PHP code, we are using GET method to receive the data from URL.

<?Php
$id=$_GET['id'];
$name=$_GET['name'];
echo "Welcome $name , your id is : $id";
?>

Using Filter

In all above code we have used JSON string or MySQL database as source for our options. After getting the data as options we can add filter to restrict the choice of options for selection.
In this demo we have restricted the options to class=Three only. Note that the filter is applied to available options only and full data is included in the JSON string.
DEMO: Filtering Options

Filtering by using Function

Instead of using value directly we can use functdion to add more conditions to our filtering. We can use variables also so filtering conditions can change dynamically.
DEMO: Filtering Options using functions

Interlinked drop down list box

We will create one category and subcategory ( inter linked ) drop down list boxes by using filters and MySQL database as source of options.
Two dependant drop down list using data from MySQL tables
Displaying records from MySQL database table

Angular Home

Displaying Select box with options from MySQL database