AngularJS Select - Dynamically add Options using PHP/MySQLi

Submitted by: 
Language: 
Visitors have accessed this post 534 times.

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


Comments

Thanks sir, Keep sharing! :)

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.