Insert Update Delete in Angular Js
In this blog, I’m explaining how to insert, update, delete
records in angularjs in an array.
Step 1:
First create an html page named “index.html”
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Crud In Angular </title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/App/Controller/EmpCtrl.js"></script>
</head>
<body ng-app="Angular.Employee" ng-controller="EmpCtrl">
<div class="col-xs-8
col-xs-offset-2">
<h2>Employee Details</h2>
<table class="table">
<tr>
<th>Name</th>
<th>City</th>
<th>IsActive</th>
<th>Actions</th>
</tr>
<tr ng-repeat="item in
model">
<td>{{item.Name}}</td>
<td>{{item.City}}</td>
<td><input type="checkbox" ng-model="item.IsActive" disabled /></td>
<td>
<button class="btn btn-primary" ng-click="edit(item)">Edit</button>
<button class="btn btn-danger" ng-click="delete(item)">Delete</button>
</td>
</tr>
<tr ng-if="showForm">
<td>
<input type="text" placeholder="Name" class="form-control" ng-model="newData.Emp.Name" />
</td>
<td>
<input type="text" placeholder="City" class="form-control" ng-model="newData.Emp.City" />
</td>
<td>
<input type="checkbox" ng-model="newData.Emp.IsActive" />
</td>
<td>
<button type="button" class="btn btn-primary" ng-click="add()">Add</button>
<button type="button" class="btn btn-default" ng-click="IsShowForm(false)">Cancel</button>
</td>
</tr>
</table>
<button type="button" class="btn btn-primary" ng-click="IsShowForm(true)">Add New Record</button>
</div>
</body>
</html>
Step 2:
Now create a javascript file named “EmpCtrl.js” and write
the below code in it:
angular.module('Angular.Employee', [])
.controller('EmpCtrl', ['$scope', function ($scope) {
//Array
to hold our data
$scope.model = [];
//To
show/hide the form
$scope.showForm = false;
//To be
used for new entry or edit an existing entry in an array
$scope.newData = {
Emp: {}
};
//Method
to show/hide th form
$scope.IsShowForm = function (IsShow) {
$scope.showForm = IsShow;
$scope.newData.Emp = {};
}
//Method
to add a new entry or edit an existing entry in an array
$scope.add = function () {
var index = $scope.model.indexOf($scope.newData.Emp);
if (index == -1) {
$scope.model.push($scope.newData.Emp);
}
else {
$scope.model[index] =
$scope.newData.Emp;
}
$scope.showForm = false;
$scope.newData.Emp = {};
}
//Method
to fill up the existing entry in the form to be edited
$scope.edit = function (item) {
$scope.newData.Emp = item;
$scope.showForm = true;
}
//Method
to delete an entry
$scope.delete = function (item) {
var index = $scope.model.indexOf(item);
$scope.model.splice(index, 1);
}
}]);
Output
Run the application:
Click on Add New Record Button, this will show the form like
this:
Now fill the form with appropriate values and click on Add button
This will add the data in the array, and your new entry will
show here.
Now add another entry
Now click on edit of record “Mark” , you will see that form
is shown up with the values of “Mark” record
Update the data and click on Add button, this will update
the record in an array.
Now click on delete button of “Mark” record
This will delete the record.
MY PREVIOUS BLOGS :
