August 12, 2018

AngularJS Dynamic dropdown ng options filter Example

By admin AngularJs, PHP, Technology 0 Comments

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 :

READ : Vuejs Simple Tooltip Plugin v-tooltip Example

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.

Post Views: 772

Tags:angularjs populate dropdown dynamically php, angularjs populate dropdown from database, angularjs with php dropdown, country state city drop down list in angularjs, country state city drop down list using angularjs2, create dynamic dropdown in angularjs, dynamic dropdown in angularjs example, dynamically adding dropdown using angularjs, how to bind dropdownlist from database in angularjs php, how to create dynamic drop down list in angularjs, how to create dynamic dropdown in angularjs