TangerinePeel
RomCom Lover
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
300 XP
In this tutorial, we will create a Simple CRUD(update, delete) Operations Using AngularJS. In my last tutorial Simple CRUD Operation Using AngularJS - Part 1 we already created a function that can create and read a data. This time we will try add some function that can update and delete the existing data. Before we proceed I hope that you read the previous tutorial and have already the code to continue on for what we left behind before. So coders let's start coding.
Creating a Form
In this form I just added a modal for update and delete
In the code above I just add some function to make the update and delete worked. The ng-click = "selectMember(member)" will store the value of the indexing array in the table when clicked by the user. ng-click = "deleteMember" will store the index of the targeted member when clicked.
Creating a function with AngularJS directives
This script will call a function within the angularJS directives.
The code above will process the request when clicked. The $scope.selectMember will store the value of the selected member when clicked. The $scope.deleteMember will delete the index of the targeted value when clicked.
There you have it we created a simple CRUD operation using AngularJS. I hope that this tutorial give you some insights about angularJS and help you to your on working projects. For more updates and tutorials just kindly visit this site. Enjoy Coding!!
Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.
Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.
FOR YOUR OWN SAFETY, PLEASE:
1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.
Download
Creating a Form
In this form I just added a modal for update and delete
- <!DOCTYPE html>
- <html
lang
=
"en"
>
- <head
>
- <meta
charset
=
"UTF-8"
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
/
>
- <title
>
Sourcecodester</
title
>
- <link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"css/bootstrap.css"
/
>
- <script
src
=
"js/angular.js"
></
script
>
- <script
src
=
"js/app.js"
></
script
>
- </
head
>
- <body
ng-app =
"myModule"
ng-controller =
"myController"
>
- <nav class
=
"navbar navbar-default"
>
- <div
class
=
"containet-fluid"
>
- <a
class
=
"navbar-brand"
href
=
"https://www.sourcecodester.com"
>
Sourcecodester</
a
>
- </
div
>
- </
nav>
- <div
class
=
"row"
>
- <div
class
=
"col-md-2"
></
div
>
- <div
class
=
"col-md-8 well"
>
- <h3
class
=
"text-primary"
>
Simple CRUD Operation Using AngularJS - Part 2</
h3
>
- <hr
style
=
"border-top:1px dotted #000;"
/
>
- <div
class
=
"alert alert-info"
>
Members Personal Information <button
class
=
"btn btn-sm btn-primary pull-right"
data-toggle=
"modal"
data-target
=
"#add_member"
><span
class
=
"glyphicon glyphicon-plus"
></
span
></
button
></
div
>
- <div
class
=
"container-fluid"
>
- <br
/
>
- <br
/
>
- <table
class
=
"table table-bordered alert-warning"
>
- <thead
>
- <tr
>
- <th
>
Member ID</
th
>
- <th
>
Full Name</
th
>
- <th
>
Email</
th
>
- <th
>
Gender</
th
>
- <th
>
Action</
th
>
- </
tr
>
- </
thead
>
- <tbody
>
- <tr
ng-repeat =
"member in members"
>
- <td
>
{{$index+1}}</
td
>
- <td
>
{{member.name}}</
td
>
- <td
>
{{member.email}}</
td
>
- <td
>
{{member.gender}}</
td
>
- <td
><button
type
=
"button"
data-toggle =
"modal"
data-target
=
"#update_member"
ng-click =
"selectMember(member)"
class
=
"btn btn-sm btn-warning"
><span
class
=
"glyphicon glyphicon-edit"
></
span
>
Update</
button
>
| <button
type
=
"button"
data-toggle =
"modal"
data-target
=
"#delete_member"
class
=
"btn btn-sm btn-danger"
><span
class
=
"glyphicon glyphicon-trash"
></
span
>
Delete</
button
></
td
>
- </
tr
>
- </
tbody
>
- </
table
>
- </
div
>
- </
div
>
- </
div
>
- <div
class
=
"modal fade"
id
=
"add_member"
tabindex
=
"-1"
role=
"dialog"
aria-labelledby=
"myModalLabel"
>
- <div
class
=
"modal-dialog"
role=
"document"
>
- <div
class
=
"modal-content"
>
- <form
>
- <div
class
=
"modal-header"
>
- <button
type
=
"button"
class
=
"close"
data-dismiss=
"modal"
aria-label
=
"Close"
><span
aria-hidden=
"true"
>
×
</
span
></
button
>
- <h4
class
=
"modal-title text-info"
id
=
"myModalLabel"
>
Member Registration</
h4
>
- </
div
>
- <div
class
=
"modal-body"
>
- <div
class
=
"form-group"
>
- <label
>
Full Name</
label
>
- <input
type
=
"text"
class
=
"form-control"
ng-model =
"newMember.name"
/
>
- </
div
>
- <div
class
=
"form-group"
>
- <label
>
Email</
label
>
- <input
type
=
"email"
class
=
"form-control"
ng-model =
"newMember.email"
/
>
- </
div
>
- <div
class
=
"form-group"
>
- <label
>
Gender</
label
>
- <select
class
=
"form-control"
ng-model =
"newMember.gender"
>
- <option
value
=
""
>
Choose an option</
option
>
- <option
value
=
"Male"
>
Male</
option
>
- <option
value
=
"Female"
>
Female</
option
>
- </
select
>
- </
div
>
- </
div
>
- <div
class
=
"modal-footer"
>
- <button
class
=
"btn btn-primary"
ng-click =
"saveMember()"
data-dismiss =
"modal"
><span
class
=
"glyphicon glyphicon-save"
></
span
>
Save</
button
>
- </
div
>
- </
form
>
- </
div
>
- </
div
>
- </
div
>
- <div
class
=
"modal fade"
id
=
"update_member"
tabindex
=
"-1"
role=
"dialog"
aria-labelledby=
"myModalLabel"
>
- <div
class
=
"modal-dialog"
role=
"document"
>
- <div
class
=
"modal-content"
>
- <form
>
- <div
class
=
"modal-header"
>
- <button
type
=
"button"
class
=
"close"
data-dismiss=
"modal"
aria-label
=
"Close"
><span
aria-hidden=
"true"
>
×
</
span
></
button
>
- <h4
class
=
"modal-title text-info"
id
=
"myModalLabel"
>
Updating Member</
h4
>
- </
div
>
- <div
class
=
"modal-body"
>
- <div
class
=
"form-group"
>
- <label
>
Full Name</
label
>
- <input
type
=
"text"
class
=
"form-control"
ng-model =
"selectedMember.name"
/
>
- </
div
>
- <div
class
=
"form-group"
>
- <label
>
Email</
label
>
- <input
type
=
"email"
class
=
"form-control"
ng-model =
"selectedMember.email"
/
>
- </
div
>
- <div
class
=
"form-group"
>
- <label
>
Gender</
label
>
- <select
class
=
"form-control"
ng-model =
"selectedMember.gender"
>
- <option
value
=
""
>
Choose an option</
option
>
- <option
value
=
"Male"
>
Male</
option
>
- <option
value
=
"Female"
>
Female</
option
>
- </
select
>
- </
div
>
- </
div
>
- <div
class
=
"modal-footer"
>
- <button
class
=
"btn btn-success"
data-dismiss =
"modal"
ng-click =
"update_member()"
><span
class
=
"glyphicon glyphicon-edit"
></
span
>
Update</
button
>
- </
div
>
- </
form
>
- </
div
>
- </
div
>
- </
div
>
- <div
class
=
"modal fade"
id
=
"delete_member"
tabindex
=
"-1"
role=
"dialog"
aria-labelledby=
"myModalLabel"
>
- <div
class
=
"modal-dialog"
role=
"document"
>
- <div
class
=
"modal-content"
>
- <form
>
- <div
class
=
"modal-body"
>
- <center
><h4
class
=
"text-danger"
>
Are you sure you want to delete this record?</
h4
></
center
>
- </
div
>
- <div
class
=
"modal-footer"
>
- <button
class
=
"btn btn-danger"
data-dismiss =
"modal"
ng-click =
"deleteMember()"
><span
class
=
"glyphicon glyphicon-check"
></
span
>
Yes</
button
>
- <button
class
=
"btn btn-success"
data-dismiss =
"modal"
><span
class
=
"glyphicon glyphicon-remove"
></
span
>
No</
button
>
- </
div
>
- </
form
>
- </
div
>
- </
div
>
- </
div
>
- </
body
>
- <script
src
=
"js/jquery-3.1.1.js"
></
script
>
- <script
src
=
"js/bootstrap.js"
></
script
>
- </
html
>
In the code above I just add some function to make the update and delete worked. The ng-click = "selectMember(member)" will store the value of the indexing array in the table when clicked by the user. ng-click = "deleteMember" will store the index of the targeted member when clicked.
Creating a function with AngularJS directives
This script will call a function within the angularJS directives.
- var
app =
angular.module
(
"myModule"
,
[
]
)
- .controller
(
"myController"
,
function
(
$scope)
{
- $scope.newMember
=
{
}
;
- $scope.clickedMembers
=
[
]
;
- $scope.members
=
[
- {
name:
"Juan Dela Cruz"
,
email:
"[email protected]"
,
gender:
"Male"
}
,
- {
name:
"San Pedro"
,
email:
"[email protected]"
,
gender:
"Male"
}
,
- {
name:
"San Lazaro"
,
email:
"[email protected]"
,
gender:
"Male"
}
- ]
;
- $scope.saveMember
=
function
(
)
{
- $scope.members
.push
(
$scope.newMember
)
;
- $scope.newMember
=
{
}
;
- }
;
- $scope.selectMember
=
function
(
member)
{
- $scope.selectedMember
=
member;
- }
;
- $scope.updateMember
=
function
(
)
{
- }
;
- $scope.deleteMember
=
function
(
)
{
- $scope.members
.splice
(
$scope.members
.indexOf
(
$scope.selectMember
)
,
1
)
;
- }
;
- }
)
;
The code above will process the request when clicked. The $scope.selectMember will store the value of the selected member when clicked. The $scope.deleteMember will delete the index of the targeted value when clicked.
There you have it we created a simple CRUD operation using AngularJS. I hope that this tutorial give you some insights about angularJS and help you to your on working projects. For more updates and tutorials just kindly visit this site. Enjoy Coding!!
Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.
Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.
FOR YOUR OWN SAFETY, PLEASE:
1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.
Download
You must upgrade your account or reply in the thread to view hidden text.