Table of Contents
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;
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