AngularJS Save Selected ng Options using PHP MySQLi

AngularJS Save Selected ng Options using PHP MySQLi

In this Post We Will Explain About is AngularJS Save Selected ng 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 Angular.js ng-select and ng-options Save in PHP with MySQLi Example

In this post we will show you Best way to implement AngularJS Set selected option of HTML Select DropDownList in PHP MySQLi, hear for Angularjs dropdown select value, text, multiple values with PHP and 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 Mysql database.

1. 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.

CREATE TABLE `articles` (
  `postid` int(11) NOT NULL AUTO_INCREMENT,
  `postname` varchar(30) NOT NULL,
PRIMARY KEY(`postid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
 
CREATE TABLE `pages` (
  `pageid` int(11) NOT NULL AUTO_INCREMENT,
  `pagename` varchar(30) NOT NULL,
PRIMARY KEY(`pageid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
 
CREATE TABLE `books` (
  `bookid` int(11) NOT NULL AUTO_INCREMENT,
  `pageid` int(11) NOT NULL,
  `postid` int(11) NOT NULL,
PRIMARY KEY(`bookid`)
  `date_books` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `articles` (`postid`, `postname`) VALUES
(1, 'Angularjs'),
(2, 'VueJS'),
(3, 'Laravel'),
(4, 'PHP'),
(5, 'Magento'),
(7, 'C#'),
(8, 'ASP.NET'),
(9, 'HTML'),
(10, 'JavaScript'),
(11, 'CSS'),
(12, 'REACT'),
(13, 'MEANJS'),
(14, 'Yii'),
(15, 'CI'),
(16, 'Google Adsense'),
(17, 'Wordpress'),
(18, 'Blogspots'),
(19, 'Freelancer'),
(20, 'Upwork');
 
INSERT INTO `books` (`bookid`, `pageid`, `postid`, `date_books`) VALUES
(1, 9, 4, '2018-04-25 14:21:16'),
(2, 8, 10, '2018-04-25 14:42:57'),
(3, 2, 7, '2018-04-25 15:22:34'),
(4, 6, 3, '2018-04-25 15:27:44'),
(5, 10, 5, '2018-04-25 15:28:29'),
(6, 4, 17, '2018-04-25 15:30:57'),
(7, 9, 5, '2018-04-25 15:37:16'),
(8, 4, 8, '2018-04-25 15:39:10');

index.html

This is simple index which contains simple form and table.

Also Read :   angularjs datepicker example with demo

<!DOCTYPE html>
<html lang="en" ng-app="liveApp">
<head>
    <meta charset="utf-8">
	
    <title>Simple AngularJS Save Selected Options in PHP with MySQLi</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>
</head>
<body ng-controller="myController">
<div class="live container">
    <h1 class="live page-header text-center">Simple AngularJS Save Selected Options (ng-option) with PHP and MySQLi</h1>
    <div class="live row">
	    <div class="live col-md-3 col-md-offset-1" ng-init="fetch()">
			<h3>Select Post</h3>
			<form name="bookForm" novalidate>
				<select ng-model="selectedPost" ng-options="f.postname for f in articles" class="form-control" placeholder="Select Post" required>
					<option value="">-- Select Post --</option>
				</select>
				<p style="margin-top:10px;"><b>Post selected:</b> {{selectedPost.postname}}</p>
				<hr>
				<h3>Select Pages</h3>
				<select ng-model="selectedpage" ng-options="v.pagename for v in pages" class="form-control" required>
					<option value="">-- Select Pages --</option>
				</select>
				<p style="margin-top:10px;"><b>Pages selected:</b> {{selectedpage.pagename}}</p>
				<hr>
				<button type="button" class="btn btn-primary" ng-click="books()" ng-disabled="bookForm.$invalid">Books</button>
			</form>
			<div class="alert alert-success text-center" ng-show="success" style="margin-top: 18px">
				<button type="button" class="close" ng-click="msgCls()"><span aria-hidden="true">×</span></button>
				{{ message }}
			</div>
			<div class="live alert alert-danger text-center" ng-show="error" style="margin-top: 18px">
				<button type="button" class="live close" ng-click="msgCls()"><span aria-hidden="true">×</span></button>
				{{ message }}
			</div>
		</div>
		<div class="live col-md-7" ng-init="retriveBooks()">
			<h3>Books Table</h3>
			<table class="live table table-bordered table-striped">
				<thead>
					<tr>
						<th>Books Date</th>
						<th>Post</th>
						<th>Pages</th>
					<tr>
				</thead>
				<tbody>
					<tr ng-repeat="books in books">
						<td>{{ books.date_books | dateToISO | date:'MMMM dd, yyyy - hh:mm a' }}</td>
						<td>{{ books.postname }}</td>
						<td>{{ books.pagename }}</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 :   Core PHP Creating SEO Friendly URL using htaccess

var liveApp = angular.module('liveApp', []);
liveApp.controller('myController', function($scope, $http){
    $scope.success = false;
    $scope.error = false;
 
	$scope.fetch = function(){
    	$http.get('do_retrive.php').success(function(data){ 
    	    $scope.articles = data.articles;
            $scope.pages = data.pages;
	    });
    }
 
    $scope.retriveBooks = function(){
        $http.get('retriveBooks.php').success(function(data){
            $scope.books = data;
        });
    }
 
    $scope.books = function(){
        $scope.newBooks = [];
 
        //inserting Data simple selected object
        $scope.newBooks.push($scope.selectedpage);
        $scope.newBooks.push($scope.selectedPost);
 
    	$http.post('books.php', $scope.newBooks)
    	.success(function(data){
            if(data.error){
                $scope.error = true;
                $scope.success = false;
                $scope.message = data.message;
            }
            else{
                $scope.success = true;
                $scope.error = false;
                $scope.message = data.message;
                $scope.retriveBooks();
            } 
            console.log(data);
	    });
    }
 
    $scope.msgCls = function(){
        $scope.success = false;
        $scope.error = false;
    }
});
 
//convert simple mysql data to angular your ger date format
liveApp.filter('dateToISO', function() {
  return function(input) {
	//return date format
    input = new Date(input).toISOString();
    return input;
  };
});

do_retrive.php

Simple PHP web api that Retriving data from simple Table on MySQL database.

<?php
	$db_con = new mysqli('localhost', 'YOUR_USER_NAME', 'YOUR_PASSWORD', 'live24u');
 
	$datares = array();
 
	//for articles
	$sql = "SELECT * FROM articles";
	$fquery=$db_con->query($sql);
	while($frow=$fquery->fetch_array()){
		$datares['articles'][] = $frow;
	}
 
	//for pages
	$yksql = "SELECT * FROM pages";
	$vquery = $db_con->query($yksql);
	while($vrow=$vquery->fetch_array()){
		$datares['pages'][] = $vrow;
	}
 
	echo json_encode($datares);
?>

books.php

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

Also Read :   Angular Multiple Carousel Image Slider

<?php
	$db_con = new mysqli('localhost', 'YOUR_USER_NAME', 'YOUR_PASSWORD', 'live24u');
 
	$data = json_decode(file_get_contents("php://input"));
 
	$resout = array('error' => false);
 
	//getting pageid
	//note that the first Data object simple $scope.newBooks is page
	$page = $data[0];
	$pgid = $page->pageid;
 
	//getting postid
	$fruit = $data[1];
	$pid = $fruit->postid;
 
	$jssql = "INSERT INTO books (pageid, postid, date_books) VALUES ('$pgid', '$pid', NOW())";
	$sdquery = $db_con->query($jssql);
 
	if($sdquery){
		$resout['message'] = "Books added Successfully";
	}
	else{
		$resout['error'] = true;
		$resout['messge'] = "Cannot add Books";
	}
 
	echo json_encode($resout);
 
?>

retriveBooks.php

Last step, It is simple another web PHP api that Retriving All the data from simple MySQL table on Database.

<?php
	$db_con = new mysqli('localhost', 'YOUR_USER_NAME', 'YOUR_PASSWORD', 'live24u');
 
	$datares = array();
 
	$sql = "SELECT * FROM books LEFT JOIN pages ON pages.pageid=books.pageid LEFT JOIN articles ON articles.postid=books.postid ORDER BY date_books DESC";
	$allquery = $db_con->query($sql);
	while($dtrow = $allquery->fetch_array()){
		$datares[] = $dtrow;
	}
 
	echo json_encode($datares);
 
?>

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 dropdown select value, text, multiple values with PHP and 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.