By: Prem Tiwari | Last Updated: | In: Angular JS
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”.
Create an index.html file and copy paste below code and save it. This will work fine.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <link rel="stylesheet" href="style.css"> <head> <title>Add & delete operation using AngularJS - FreeWebMentor</title> <meta name="description" content="How to do Add and Delete Operation using AngularJS"/> </head> <body> <script> 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> <center> <div ng-app="myShoppingList" ng-cloak ng-controller="myCtrl" class="w3-card-2 w3-margin" style="max-width:600px;"> <header class="w3-container w3-light-grey w3-padding-16"> <h3>Add & delete operation using AngularJS</h3> </header> <ul class="w3-ul"> <li ng-repeat="x in products" class="w3-padding-16">{{x}}<span ng-click="removeItem($index)" style="cursor:pointer;" class="w3-right w3-margin-right">x</span></li> </ul> <div class="w3-container w3-light-grey w3-padding-16"> <div class="w3-row w3-margin-top"> <div class="w3-col s10"> <input placeholder="Add new items" ng-model="addMe" class="w3-input w3-border w3-padding"> </div> <div class="w3-col s2"> <button ng-click="addItem()" class="w3-btn w3-padding w3-green">Add New</button> </div> </div> <p class="w3-text-red">{{errortext}}</p> </div> </div> </center> </body> </html> |
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.
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 is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari
Add & delete operation using AngularJS, angualarjs tutorial, angularjs tutorial, angularjs tutorial for beginners
