AngularJS Select - Dynamically add Options using PHP/MySQLi

Submitted by nurhodelta_17 on Wednesday, January 10, 2018 - 19:39.

Getting Started

I've used CDN for Bootstrap and Angular JS in this tutorial so you need internet connection for them to work.

Creating our Database

First, we're gonna 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.
  1. CREATE TABLE `fruits` (
  2.   `fruitid` int(11) NOT NULL AUTO_INCREMENT,
  3.   `fruitname` varchar(30) NOT NULL,
  4. PRIMARY KEY(`fruitid`)

index.html

This is our index that contains our add form, table and select input.
  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="app">
  4.     <meta charset="utf-8">
  5.     <title>AngularJS Select - Dynamically add Options using PHP/MySQLi</title>
  6.     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  7.     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  8.     <style type="text/css">
  9.         .errortext{
  10.                 color:red;
  11.         }
  12.     </style>
  13. </head>
  14. <body ng-controller="myController" ng-init="fetch()">
  15. <div class="container">
  16.     <h1 class="page-header text-center">AngularJS Select - Dynamically add Options using PHP/MySQLi</h1>
  17.     <div class="col-md-2 col-md-offset-1">
  18.         <h3>Add new Fruit</h3>
  19.         <input type="text" placeholder="Fruit Name" class="form-control" ng-model="newFruit.fruitname"><br>
  20.         <button type="button" class="btn btn-primary" ng-click="add()"><span class="glyphicon glyphicon-floppy-disk"></span> Save</button>
  21.         </div>
  22.         <div class="col-md-6">
  23.                 <h3>Fruit Table</h3>
  24.                 <table class="table table-bordered table-striped">
  25.                         <thead>
  26.                                 <tr>
  27.                                         <th>Fruit ID</th>
  28.                                         <th>Fruit Name</th>
  29.                                 <tr>
  30.                         </thead>
  31.                         <tbody>
  32.                                 <tr ng-repeat="fruit in fruits">
  33.                                         <td>{{ fruit.fruitid }}</td>
  34.                                         <td>{{ fruit.fruitname }}</td>
  35.                                 </tr>
  36.                         </tbody>
  37.                 </table>
  38.         </div>
  39.         <div class="col-md-2">
  40.                 <h3>Select Fruit</h3>
  41.                 <!-- <select ng-model="selectedFruit">
  42.                         <option ng-repeat="x in fruits" value="{{x.fruitid}}">{{x.fruitname}}</option>
  43.                 </select> -->
  44.                 <select ng-model="selectedFruit" ng-options="x.fruitname for x in fruits" class="form-control">
  45.                 </select>
  46.                 <hr>
  47.                 <p><b>You selected:</b> {{selectedFruit.fruitname}}</p>
  48.                 <p><b>ID:</b> {{selectedFruit.fruitid}}</p>
  49.                 <!-- <p><b>You selected:</b> {{selectedFruit}}</p> -->
  50.         </div>
  51. </div>
  52. <script src="angular.js"></script>
  53. </body>
  54. </html>

angular.js

This contains our angular js scripts.
  1. var app = angular.module('app', []);
  2. app.controller('myController', function($scope, $http){
  3.         $scope.fetch = function(){
  4.         $http.get("fetch.php").success(function(data){
  5.             $scope.fruits = data;
  6.             });
  7.     }
  8.  
  9.     $scope.add = function(){
  10.         //console.log($scope.newFruit);
  11.         $http.post("add.php", $scope.newFruit)
  12.         .success(function(){
  13.                 $scope.newFruit = '';
  14.                 $scope.fetch();
  15.             });
  16.     }
  17. });

fetch.php

This is our PHP code/api that fetches data from our database.
  1. <?php
  2.         $conn = new mysqli('localhost', 'root', '', 'angular');
  3.        
  4.         $output = array();
  5.         $sql = "SELECT * FROM fruits";
  6.         $query=$conn->query($sql);
  7.         while($row=$query->fetch_array()){
  8.                 $output[] = $row;
  9.         }
  10.  
  11.         echo json_encode($output);
  12. ?>

add.php

This is our PHP code/api in adding data into our table.
  1. <?php
  2.         $conn = new mysqli('localhost', 'root', '', 'angular');
  3.        
  4.         $data = json_decode(file_get_contents("php://input"));
  5.  
  6.         $fruitname = $data->fruitname;
  7.  
  8.         $sql = "INSERT INTO fruits (fruitname) VALUES ('$fruitname')";
  9.         $conn->query($sql);
  10.        
  11. ?>

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 options 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 :)
Tags
angular js
select
select input
options in select
ng-option
ng-repeat

Comments