Bootstrap 4.0 Version
https://getbootstrap.com/docs/4.0/getting-started/introduction/
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
angularjs CDN
https://angularjs.org/ Version 1.8.2 https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js
CREATE TABLE `products` (
`id` int(11) NOT NULL,
`productname` varchar(30) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `products` (`id`, `productname`) VALUES
(1, 'Ipad'),
(2, 'Iphone'),
(3, 'Macbook'),
(4, 'Mac'),
(5, 'Dell Inspiron 15'),
(6, 'Mac Mini');
ALTER TABLE `products`
ADD PRIMARY KEY (`id`);
ALTER TABLE `products`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;
index.html
//index.html
<!DOCTYPE html>
<html lang="en" ng-app="appselect">
<head>
<meta charset="utf-8">
<title>AngularJS Select add Options with PHP MySQLi</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="selectController" ng-init="fetch()">
<div class="container">
<h1 class="page-header text-center">AngularJS Select add Options with PHP MySQLi</h1>
<div class="row">
<div class="col-md-6">
<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()"> Save</button>
</div>
<div class="col-md-6">
<h3>Select Product</h3>
<select ng-model="selectedproduct" ng-options="x.productname for x in products" class="form-control">
</select>
<hr>
<p><b>You selected:</b> {{selectedproduct.productname}}</p>
<p><b>ID:</b> {{selectedproduct.id}}</p>
</div>
</div>
<div class="row">
<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="rs in products">
<td>{{ rs.id }}</td>
<td>{{ rs.productname }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="angular.js"></script>
</body>
</html>
angular.js
//angular.js
var app = angular.module('appselect', []);
app.controller('selectController', function($scope, $http){
$scope.fetch = function(){
$http({
method: 'GET',
url: 'fetch.php',
}).then(function (data){
console.log(data)
$scope.products = data.data;
},function (error){
console.log(error, 'can not get data.');
});
}
$scope.add = function(){
console.log($scope.newProduct);
$http({
method: 'POST',
url: 'add.php',
data: $scope.newProduct
}).then(function (data){
console.log(data)
$scope.newProduct = '';
$scope.fetch();
},function (error){
console.log(error, 'can not get data.');
});
}
});
fetch.php
//fetch.php
<?php
$conn = new mysqli('localhost', 'root', '', 'testingdb');
$output = array();
$sql = "SELECT * FROM products";
$query=$conn->query($sql);
while($row=$query->fetch_array()){
$output[] = $row;
}
echo json_encode($output);
?>
add.php
//add.php
<?php
$conn = new mysqli('localhost', 'root', '', 'testingdb');
$data = json_decode(file_get_contents("php://input"));
$productname = $data->productname;
$sql = "INSERT INTO products (productname) VALUES ('$productname')";
$conn->query($sql);
?>
