purplevelvet
Cyber Footprint Reduction Specialist
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
300 XP
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.
index.html
This is our index that contains our add form, table and select input.
angular.js
This contains our angular js scripts.
fetch.php
This is our PHP code/api that fetches data from our database.
add.php
This is our PHP code/api in adding data into our table.
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 :)
Download
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.
- 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 our index that contains our 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 our 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 our PHP code/api that fetches data from our 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 our PHP code/api in adding data into our 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 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 :)
Download
You must upgrade your account or reply in the thread to view the hidden content.