AngularJS Select – Dynamically add Options using PHP MySQLi

AngularJS Select – Dynamically add Options using PHP MySQLi

In this Post We Will Explain About is AngularJS Select – Dynamically add Options using PHP MySQLi With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Dynamic Dropdown list using AngularJS with PHP MySQLi Example

In this post we will show you Best way to implement Next Dynamic Dependent Select Box using AngularJS, with PHP MySQLi, hear for AngularJS – Add options to select box dynamically using PHP MySQLi with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.




Creating simple Database

Today, I am working on the simple make latest new database.

1. and then second one Open phpMyAdmin in browsers.
2. trigger databases, make a mysql database and name it as live24u.
3. And then third one is creating a mysql database, click the SQL and sopy paste the below Scripts.

Also Read :   Codeigniter Verify Email Address using PHP

CREATE TABLE `products` (
  `productid` int(11) NOT NULL AUTO_INCREMENT,
  `productname` varchar(30) NOT NULL,
PRIMARY KEY(`productid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

index.html

This is simple main page in angular index.html that Data contains simple add product form, and select table and select HTML input.

<!DOCTYPE html>
<html lang="en" ng-app="liveApp">
<head>
<meta charset="utf-8">
<title>Simple AngularJS Select - Step By step Dynamically add Options using PHP MySQLi Example</title>
<!-- bootstrap.min.css -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="nofollow">
<!-- angular.min.js -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>  
	<style type="text/css">
    	.errortext{
    		color:c60000;
    	}
    </style>
</head>
<body ng-controller="liveProductCtrl" ng-init="retrive()">
<div class="container">
    <h1 class="page-header text-center">AngularJS Select - Dynamically add Options using PHP/MySQLi</h1>
    <div class="col-md-2 col-md-offset-1">
    	<h3>Add new Product</h3>
    	<input type="text" placeholder="Product Name" class="form-control" ng-model="newProduct.productname"><br>
    	<button type="button" class="btn btn-primary" ng-click="add()"><span class="glyphicon glyphicon-floppy-disk"></span> Save</button>
	</div>
	<div class="col-md-6">
		<h3>Product Table</h3>
		<table class="table table-bordered table-striped">
			<thead>
				<tr>
					<th>Product ID</th>
					<th>Product Name</th>
				<tr>
			</thead>
			<tbody>
				<tr ng-repeat="item in products">
					<td>{{ item.productid }}</td>
					<td>{{ item.productname }}</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="col-md-2">
		<h3>Select Product</h3>
		<!-- <select ng-model="productSelected">
			<option ng-repeat="x in products" value="{{x.productid}}">{{x.productname}}</option>
		</select> -->
		<select ng-model="productSelected" ng-options="x.productname for x in products" class="form-control">
		</select>
		<hr>
		<p><b>You selected:</b> {{productSelected.productname}}</p>
		<p><b>ID:</b> {{productSelected.productid}}</p>
		<!-- <p><b>You selected:</b> {{productSelected}}</p> -->
	</div>
</div>
<script src="main.js"></script>
</body>
</html>

angular.js

This Data contains simple main js scripts.

Also Read :   jquery Compress or resize Image File Size before Uploading PHP Code

var liveApp = angular.module('liveApp', []);
liveApp.controller('liveProductCtrl', function($scope, $http){
	$scope.retrive = function(){
    	$http.get("product_fetch.php").success(function(data){ 
    	    $scope.products = data; 
	    });
    }
 
    $scope.add = function(){
    	//console.log($scope.newProduct);
    	$http.post("addproduct.php", $scope.newProduct)
    	.success(function(){ 
    		$scope.newProduct = '';
	        $scope.retrive();
	    });
    }
});

product_fetch.php

This is simple PHP code/api that Retriving data from simple database.

<?php
	$db_con = new mysqli('localhost', 'YOUR_USER_NAME', 'YOUR_PASSWORD', 'live24u');
 
	$myoutput = array();
	$msql = "SELECT * FROM products";
	$query=$db_con->query($msql);
	while($datarow=$query->fetch_array()){
		$myoutput[] = $datarow;
	}
 
	echo json_encode($myoutput);
?>

addproduct.php

This is simple PHP code/api in adding data into simple table.

<?php
	$db_con = new mysqli('localhost', 'YOUR_USER_NAME', 'YOUR_PASSWORD', 'live24u');
 
	$lstdata = json_decode(file_get_contents("php://input"));
 
	$productname = $lstdata->productname;
 
	$msql = "INSERT INTO products (productname) VALUES ('$productname')";
	$db_con->query($msql);
 
?>

Difference between ng-options and ng-repeat?

In this My Lovely Post I have used to angular ng-options directives. By doing Therefor, the main options in simple select HTML input Boxes are objects. Where as, when using angular js ng-repeat looping, the options some become a string.

Also Read :   Jquery Ajax Post request Example For Submitting AJAX Forms in PHP

We have added in the simple comments in My File index.html the source code in using looping Like as a ng-repeat for HTML input select. You can both angularjs futures exchange between the ng-options for you to simple spot the difference.

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example





Example

I hope you have Got What is Dynamic Drop-down list using AngularJS with PHP MySQLi And how it works.I would Like to have Feed Back From My Blog(live24u.com) readers.Your Valuable Feed Back,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.