How to do Add & Delete Operation Using AngularJS

Here is the very easy & simple tutorial to d the basic add and delete operation using Angularjs. A few days back when one of my blog reader has asked this question to create a basic AngularJS example application with Add & Delete operation. Here is the complete question “How to do Add & Delete operation using AngularJS”.

How to do Add & Delete Operation using AngularJS

Create an index.html file and copy paste below code and save it. This will work fine.

<!DOCTYPE html>

<html>

<head>

<title>Add & delete operation using AngularJS - FreeWebMentor</title>

</head>

<body>

var app = angular.module("myShoppingList", []);

app.controller("myCtrl", function($scope) {

$scope.products = ["Add item 1", "Add item 2", "Add item 3"];

$scope.addItem = function () {

$scope.errortext = "";

if (!$scope.addMe) {return;}

if ($scope.products.indexOf($scope.addMe) == -1) {

$scope.products.push($scope.addMe);

} else {

$scope.errortext = "This is a duplicate item.";

}

$scope.removeItem = function (x) {

$scope.errortext = "";

$scope.products.splice(x, 1);

}

});

</script>

<h3>Add & delete operation using AngularJS</h3>

</header>

</ul>

</div>

</div>

<p class="w3-text-red">{{errortext}}</p>

</div>

</center>

</body>

</html>

See the below demo

This tutorial will look like the below screenshot. If you want to test this before implementing into your web application, then See the live Demo here.

How to do Add & Delete Operation Using AngularJS

Live Demo

Over to You

Hope this tutorial helped you, Please like and share this tutorial with your friends and also subscribe newsletter to get all future awesome tutorials directly in your email inbox.

Prem Tiwari

An engineer by profession and a passionate blogger by heart. Founder of FreeWebMentor.com (A Programming blog for beginners), Tech Speaker at various forums. A part from this he is an open source enthusiast, WordPress Lover, Blogger, SEO, and Growth Strategic.

Article Tags: Add & delete operation using AngularJS, angualarjs tutorial, angularjs tutorial, angularjs tutorial for beginners

❮ Previous

Next ❯

How to do Add & Delete Operation Using AngularJS