Below code explains how to dynamically load a dropdown using angular js.and while selecting a particular employee name from the dropdown it will display the details of the employee.
Step1: create database in mysql with name mytest_data. create a table tbl_employee
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
CREATE TABLE IF NOT EXISTS `tbl_employee` ( `id` int(10) NOT NULL, `name` varchar(200) NOT NULL, `age` int(10) NOT NULL, `email` varchar(100) NOT NULL, `phone` int(10) NOT NULL, `country` varchar(200) NOT NULL, `state` varchar(200) NOT NULL, `city` varchar(200) NOT NULL ) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1; INSERT INTO `tbl_employee` (`id`, `name`, `age`, `email`, `phone`, `country`, `state`, `city`) VALUES (1, 'vasanthan', 34, 'vasanthanpv@gmail.com', 2147483647, 'india', 'Karnataka', 'mangalore'), (2, 'robin', 30, 'contact@mydoubts.in', 2147483647, 'india', 'mumbai', 'mumbai'); |
step2: create a php file called loaddata.php to fetch the employee details from the database
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?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_employee",$conn); $rows = array(); while($r = mysql_fetch_assoc($query_data)) { $rows[] = $r; } echo json_encode($rows); ?> |
step3:create a file called index.php. This file contains the angular js code to display dropdown and load the data.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!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="EmplCtrl"> <p>Select the Employee</p> <select ng-model="selectedEmployee" ng-options="x.name for x in emplist"> <option value="">-- choose an employee --</option> </select> <div ng-show="selectedEmployee.id>='1'"> <h1>Employee: {{selectedEmployee.id}}</h1> <p>Age:{{selectedEmployee.age}}</p> <p>Phone:{{selectedEmployee.phone}}</p> <p>Email:{{selectedEmployee.email}}</p> <p>Country:{{selectedEmployee.country}}</p> <p>State:{{selectedEmployee.state}}</p> </div> </div> <script> var app=angular.module('angularApp',[]); app.controller('EmplCtrl', function($scope, $http) { $http.get("loaddata.php").then(function (response) { $scope.emplist = response.data; }); }); </script> </body> </html> |