AngularJS Selected Options (ng-repeat) Save MySQLi using PHP

AngularJS Selected Options (ng-repeat) Save MySQLi using PHP

In this Post We Will Explain About is AngularJS Selected Options (ng-repeat) Save MySQLi using PHP 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 how to use ng-repeat to set default value using PHP/MySQLi Example

In this post we will show you Best way to implement Display php MySQLi selected JSON data with angular ngRepeat, hear for AngularJS Save Selected Options (ng-repeat) using PHP/MySQLi with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.




Creating simple Database

First of all, Hello Friends I am Going to make simple Mysql database and some insert data for simple data options.

1. Simple open tab phpMyAdmin.
2. here Trigger databases, make a database and name it as live24u.
3. and then making a mysql database, Trigger the SQL and simple copy paste the below script.

CREATE TABLE `mobiles` (
  `mobileid` int(11) NOT NULL AUTO_INCREMENT,
  `mobilename` varchar(30) NOT NULL,
PRIMARY KEY(`mobileid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
 
CREATE TABLE `laptops` (
  `laptopid` int(11) NOT NULL AUTO_INCREMENT,
  `laptopname` varchar(30) NOT NULL,
PRIMARY KEY(`laptopid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
 
CREATE TABLE `prebooks` (
  `prebookid` int(11) NOT NULL AUTO_INCREMENT,
  `laptopid` int(11) NOT NULL,
  `mobileid` int(11) NOT NULL,
PRIMARY KEY(`prebookid`)
  `dt_prbook` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `mobiles` (`mobileid`, `mobilename`) VALUES
(1, 'Lenovo'),
(2, 'iPhone'),
(3, 'OnePlus 5T'),
(4, 'Galaxy S9'),
(5, 'Lg'),
(7, 'iBall'),
(8, 'iVooMi i1s'),
(9, 'Micromax'),
(10, 'Sony'),
(11, 'Motorola'),
(12, 'Dell'),
(13, 'Apple'),
(14, 'Blackberry'),
(15, 'china'),
(16, 'Samsung'),
(17, 'Nokia'),
(18, 'Oppo'),
(19, 'Vivo'),
(20, 'Redmi');
 
INSERT INTO `prebooks` (`prebookid`, `laptopid`, `mobileid`, `dt_prbook`) VALUES
(1, 9, 4, '2020-04-25 14:21:16'),
(2, 8, 10, '2020-04-25 14:42:57'),
(3, 2, 7, '2020-04-25 15:22:34'),
(4, 6, 3, '2020-04-25 22:27:55'),
(5, 10, 5, '2020-04-25 11:28:29'),
(6, 4, 17, '2020-04-25 25:30:57'),
(7, 9, 5, '2020-04-25 21:37:16'),
(8, 4, 8, '2020-04-25 15:39:10');

index.html

It is simple main file index.html which All the Data contains simple HTML form and create table.

Also Read :   AngularJS Introduction and Hello World example

<!DOCTYPE html>
<html lang="en" ng-app="liveApp">
<head>
    <meta charset="utf-8">
    <title>AngularJS Save Data - Selected Options (ng-repeat) using PHP with MySQLi Example</title>

	<!-- bootstrap.min.css -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<!-- angular.min.js -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="liveCtrl">
<div class="container">
    <h1 class="page-header text-center">Simple AngularJS Save Data to Selected angular HTML Select Options (ng-repeat) using PHP with MySQLi</h1>
    <div class="live row">
	    <div class="live col-md-3 col-md-offset-1" ng-init="getdata()">
			<h3>Select Mobile</h3>
			<form name="prebookForm" novalidate>
				<select ng-model="selectedMobile" class="form-control">
					<option ng-repeat="mobile in mobiles" value="{{mobile.mobileid}}">{{mobile.mobilename}}</option>
				</select>
				<p style="margin-top:10px;"><b>Mobile selected (ID):</b> {{selectedMobile}}</p>
				<hr>
				<h3>Select Laptop</h3>
				<select ng-model="selectedLaptop" class="form-control">
					<option ng-repeat="laptop in laptops" value="{{laptop.laptopid}}">{{laptop.laptopname}}</option>
				</select>
				<p style="margin-top:10px;"><b>Laptop selected (ID):</b> {{selectedLaptop}}</p>
				<hr>
				<button type="button" class="btn btn-success" ng-click="prebooks()" ng-disabled="prebookForm.$invalid">Prebooks</button>
			</form>
			<div class="alert alert-success text-center" ng-show="success" style="margin-top: 18px">
				<button type="button" class="close" ng-click="messageCls()"><span aria-hidden="true">×</span></button>
				{{ comments }}
			</div>
			<div class="alert alert-danger text-center" ng-show="error" style="margin-top: 18px">
				<button type="button" class="close" ng-click="messageCls()"><span aria-hidden="true">×</span></button>
				{{ comments }}
			</div>
		</div>
		<div class="live col-md-7" ng-init="fetchpurchase()">
			<h3>Prebooks Table</h3>
			<table class="live table table-bordered">
				<thead>
					<tr>
						<th>Prebooks Date</th>
						<th>Mobile</th>
						<th>Laptop</th>
					<tr>
				</thead>
				<tbody>
					<tr ng-repeat="prebooks in prebooks">
						<td>{{ prebooks.dt_prbook | dateToISO | date:'MMMM dd, yyyy - hh:mm a' }}</td>
						<td>{{ prebooks.mobilename }}</td>
						<td>{{ prebooks.laptopname }}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>
<script src="main.js"></script>
</body>
</html>

main.js

It Data contains simple main.js scripts.

Also Read :   Highcharts Customize Tooltip Data Example

var liveApp = angular.module('liveApp', []);
liveApp.controller('liveCtrl', function($scope, $http){
    $scope.success = false;
    $scope.error = false;
 
	$scope.getdata = function(){
    	$http.get('do_retive.php').success(function(data){ 
    	    $scope.mobiles = data.mobiles;
            $scope.laptops = data.laptops;
	    });
    }
 
    $scope.fetchpurchase = function(){
        $http.get('fetchpurchase.php').success(function(data){
            $scope.prebooks = data;
        });
    }
 
    $scope.prebooks = function(){
    	$http.post('prebooks.php', {
            'mobile': $scope.selectedMobile,
            'laptop': $scope.selectedLaptop
        })
    	.success(function(data){
            if(data.error){
                $scope.error = true;
                $scope.success = false;
                $scope.comments = data.comments;
            }
            else{
                $scope.success = true;
                $scope.error = false;
                $scope.comments = data.comments;
                $scope.fetchpurchase();
            } 
            console.log(data);
	    });
    }
 
    $scope.messageCls = function(){
        $scope.success = false;
        $scope.error = false;
    }
});
 
//convert here date format mysql data to angularjs date format
app.filter('dateToISO', function() {
  return function(liveinput) {
    liveinput = new Date(liveinput).toISOString();
    return liveinput;
  };
});

do_retive.php

Simple PHP Web-api that Retrieves data from simple MySQL database.

<?php
	$db_con = new mysqli('localhost', 'YOUR_USER_NAME', 'YOUR_PASSWORD', 'live24u');
 
	$myres = array();
 
	//for mobiles
	$msql = "SELECT * FROM mobiles";
	$moquery=$db_con->query($msql);
	while($morow=$moquery->fetch_array()){
		$myres['mobiles'][] = $morow;
	}
 
	//for laptops
	$lpsql = "SELECT * FROM laptops";
	$lpquery = $db_con->query($lpsql);
	while($laprow=$lpquery->fetch_array()){
		$myres['laptops'][] = $laprow;
	}
 
	echo json_encode($myres);
?>

prebooks.php

It is simple PHP web api in puting the selected angular options into simple MySQL Database.

Also Read :   Simple AngularJS FAQ Show and Hide

<?php
	$db_con = new mysqli('localhost', 'YOUR_USER_NAME', 'YOUR_PASSWORD', 'live24u');
 
	$data = json_decode(file_get_contents("php://input"));
 
	$myout = array('error' => false);
 
	//getting laptopid
	$lid = $data->laptop;
 
	//getting mobileid
	$mid = $data->mobile;
 
	$lstsql = "INSERT INTO prebooks (laptopid, mobileid, dt_prbook) VALUES ('$lid', '$mid', NOW())";
	$query = $db_con->query($lstsql);
 
	if($query){
		$myout['comments'] = "Prebooks added Successfully";
	}
	else{
		$myout['error'] = true;
		$myout['messge'] = "Cannot add Prebooks";
	}
 
	echo json_encode($myout);
 
?>

fetchpurchase.php

Lastly, this is simple More PHP web-api that Retrives data from simple MySQL Database.

<?php
	$db_con = new mysqli('localhost', 'YOUR_USER_NAME', 'YOUR_PASSWORD', 'live24u');
 
	$myres = array();
 
	$fsql = "SELECT * FROM prebooks LEFT JOIN laptops ON laptops.laptopid=prebooks.laptopid LEFT JOIN mobiles ON mobiles.mobileid=prebooks.mobileid ORDER BY dt_prbook DESC";
	$flquery = $db_con->query($fsql);
	while($row = $flquery->fetch_array()){
		$myres[] = $row;
	}
 
	echo json_encode($myres);
 
?>

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 AngularJS Save Selected Options (ng-repeat) using PHP/MySQLi And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.