In this article,
I would like you know you about Add records to the list and Remove the records
from list in AngularJS.
Here in angularjs
to add the row/record to the list is using 'push' property will be done
And to remove the
record/ row from the list we have to use 'splice' property with index value
should be given.
index.html
<!DOCTYPE html>
<html ng-app="addremoveitems">
<head>
<meta charset="utf-8" />
<title>AngularJS
- Add And Remove/Delete Item From List</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
<script src="index.js"></script>
</head>
<body ng-controller="AddRemoveItemController">
<div class="form-group container">
<div class="row">
<h3>AngularJS
- Add And Remove/Delete Item From List</h3>
</div>
<div class="row" style="position:relative;">
<div class="col-md-3">
<label>Item Code</label>
<input type="text" name="itemcode" class="form-control" id="itemcode" ng-model="ItemCode" />
</div>
<div class="col-md-3">
<label>Item Name</label>
<input type="text" name="itemname" class="form-control" id="itemname" ng-model="ItemName" />
</div>
<div class="col-md-3">
<label>Item
Description</label>
<input type="text" name="itemdescription" class="form-control" id="itemdescription" ng-model="ItemDescription" />
</div>
<div class="col-md-3" style="position:absolute;right:0;bottom:0;">
<button type="button" name="addtolist" class="btn
btn-primary" id="addtolist" ng-click="AddToList()" >Add To List</button>
</div>
</div>
<span ng-show="showspan" style="font-size:medium;color:red">{{warningmsg}}</span>
<div class="row">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Item Code</th>
<th>Item Name</th>
<th>Item Description</th>
<th>Action</th>
</tr>
</thead>
<tr ng-repeat="item in ItemDetails">
<td>{{ item.ItemCode}}</td>
<td>{{ item.ItemName}}</td>
<td>{{ item.ItemDescription}}</td>
<td><button type="button" name="delete" class="btn
btn-danger" ng-click="DeleteItem(item)">Delete</button></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
index.js
var app = angular.module('addremoveitems', []);
//Simple
Logic To Add Data To List And Delete Specific Item From List Using ng-repeat
and ng-click
app.controller('AddRemoveItemController', function ($scope) {
$scope.ItemDetails = []; //To Declare List
$scope.showspan = false; // false
is to hide the scope
$scope.AddToList = function () {
$scope.AlreadyExistsInList = false;
if ($scope.ItemCode && $scope.ItemName &&
$scope.ItemDescription) // this condition is to not allow
the empty or undefined or false or 0 in to the braces
{
if ($scope.ItemDetails.length>0)
$scope.ItemDetails.forEach(function (item) { // To check whether the newly adding item is exists or not
if (item.ItemCode.toLowerCase() == $scope.ItemCode.toLowerCase()
&& item.ItemName.toLowerCase() == $scope.ItemName.toLowerCase()
&& item.ItemDescription.toLowerCase() == $scope.ItemDescription.toLowerCase())
{
$scope.AlreadyExistsInList
= true;
}
});
if (!$scope.AlreadyExistsInList) { // If not
added, then it should added to the list, otherwise it should go to else
condition and show warning message
$scope.showspan = false;
$scope.ItemDetails.push({
ItemCode: $scope.ItemCode, ItemName: $scope.ItemName, ItemDescription:
$scope.ItemDescription }); // this is used to push
i.e., add the data in the list
//to
clear textboxes after add item to list
$scope.ItemCode = "";
$scope.ItemName = "";
$scope.ItemDescription = "";
}
else {
$scope.warningmsg = "This Record Is Already Exists";
$scope.showspan = true;
}
if (!$scope.ItemDetails.length)
// this condition is to insert first record when List
ItemDetails Is Empty
{
$scope.ItemDetails.push({
ItemCode: $scope.ItemCode, ItemName: $scope.ItemName, ItemDescription:
$scope.ItemDescription });
//to
clear textboxes after add item to list
$scope.ItemCode = "";
$scope.ItemName = "";
$scope.ItemDescription = "";
}
}
else
{
$scope.warningmsg = "Please Enter All Input TextBox Details";
$scope.showspan = true;
}
}
$scope.DeleteItem = function (item) {
var index = $scope.ItemDetails.indexOf(item); //this is to read the index value of the list
if (index != -1)
$scope.ItemDetails.splice(index,
1); // splice is used to remove the given index value
// '1' is used to remove only 1 index value, if it is two
, two index values will be removed from the specified index
}
});
Output :-
After Running The Application, It
Display As Below :
No comments:
Post a Comment
Note: only a member of this blog may post a comment.