Select Dynamically Add Options using AngularJS with PHP/MySQLi

February 2, 2021
PHP
Select Dynamically Add Options using AngularJS with PHP/MySQLi

Tutorial: Select Dynamically add Options using AngularJS with PHP/MySQLi with Source Code

Getting Started on Select Dynamically Add Options using AngularJS

This is a tutorial on Select Dynamically Add Options using AngularJS with PHP/MySQLi. I’ve used CDN for Bootstrap and Angular JS in this tutorial, so you need an internet connection for them to work.

Creating our Database

First, we’re going to create our database.

1. Open phpMyAdmin.

2. Click databases, create a database and name it as angular.

3. After creating a database, click the SQL and paste the below codes. See image below for detailed instruction.

CREATE TABLE `fruits` (
  `fruitid` int(11) NOT NULL AUTO_INCREMENT,
  `fruitname` varchar(30) NOT NULL,
PRIMARY KEY(`fruitid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Select Dynamically Add Options using AngularJS

index.html

This is a index that contains an add form, table and select input.

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="utf-8">
    <title>AngularJS Select - Dynamically add Options using PHP/MySQLi</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <style type="text/css">
    	.errortext{
    		color:red;
    	}
    </style>
</head>
<body ng-controller="myController" ng-init="fetch()">
<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 Fruit</h3>
    	<input type="text" placeholder="Fruit Name" class="form-control" ng-model="newFruit.fruitname"><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>Fruit Table</h3>
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>Fruit ID</th>
                    <th>Fruit Name</th>
                <tr>
            </thead>
            <tbody>
                <tr ng-repeat="fruit in fruits">
                    <td>{{ fruit.fruitid }}</td>
                    <td>{{ fruit.fruitname }}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="col-md-2">
        <h3>Select Fruit</h3>
        <!-- <select ng-model="selectedFruit">
            <option ng-repeat="x in fruits" value="{{x.fruitid}}">{{x.fruitname}}</option>
        </select> -->
        <select ng-model="selectedFruit" ng-options="x.fruitname for x in fruits" class="form-control">
        </select>
        <hr>
        <p><b>You selected:</b> {{selectedFruit.fruitname}}</p>
        <p><b>ID:</b> {{selectedFruit.fruitid}}</p>
        <!-- <p><b>You selected:</b> {{selectedFruit}}</p> -->
    </div>
</div>
<script src="angular.js"></script>
</body>
</html>

angular.js

This contains a angular js scripts.

var app = angular.module('app', []);
app.controller('myController', function($scope, $http){
    $scope.fetch = function(){
    	$http.get("fetch.php").success(function(data){ 
    	    $scope.fruits = data; 
        });
    }
 
    $scope.add = function(){
    	//console.log($scope.newFruit);
    	$http.post("add.php", $scope.newFruit)
    	.success(function(){ 
    		$scope.newFruit = '';
            $scope.fetch();
        });
    }
});

fetch.php

This is a PHP code/api that fetches data from a database.

<?php
    $conn = new mysqli('localhost', 'root', '', 'angular');
 
    $output = array();
    $sql = "SELECT * FROM fruits";
    $query=$conn->query($sql);
    while($row=$query->fetch_array()){
        $output[] = $row;
    }
 
    echo json_encode($output);
?>

add.php

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

<?php
    $conn = new mysqli('localhost', 'root', '', 'angular');
 
    $data = json_decode(file_get_contents("php://input"));
 
    $fruitname = $data->fruitname;
 
    $sql = "INSERT INTO fruits (fruitname) VALUES ('$fruitname')";
    $conn->query($sql);
 
?>

ng-options vs ng-repeat

In this tutorial, we have used ng-options. By doing so, the options in our select input are objects. Whereas, when using ng-repeat, the possibilities become a string.

I’ve added in the comments in index.html the code in using ng-repeat for input select. You can exchange between ng-options for you to spot the difference.

That ends this tutorial. Happy Coding!

Related Tutorials: Save Selected Options using AngularJS and PHP/MySQLi, Load More Data using AngularJS with PHP/MySQLi, Add Form Fields Dynamically using AngularJS with PHP/MySQLi

Download Here
Facebook Comments

Leave a Reply

Your email address will not be published.