How to remove an item from an array in AngularJS Scope?
Last Updated :
04 Oct, 2023
In the AngularJS framework, we can manipulate the data that is within the scope, for example, we can perform the operations on an array by removing its elements. This helps us for better efficiency in developing the web application.
We can remove the array elements in the applications like to-do list items, or the application that is used to display the data in the list manner. In the article, we will see how we can remove t an item from an array in the AngularJS framework. We will discuss 2 approaches through which we can remove the items.
Approaches to remove an item from an array in AngularJS Scope:
- Using the splice Method
- Using filter Method
Steps to Configure the AngularJS Project
The below steps will be followed for configuring the AngularJS Project:
Step 1: Create a new folder for the project. We are using the VSCode IDE to execute the command in the integrated terminal of VSCode.
mkdir array-remove
cd array-remove
Step 2: Create the following files in the newly created folder, we will have all our logic and styling code:
- index.html
- app.js
- styles.css
We will understand the above concept with the help of suitable approaches & will understand its implementation through the illustration.
Using the ‘splice’ method to Remove an Array Item
In this approach, we use the splice method that enables us to remove the elements from any array in AngularJS scope by using the index of the element that we want to remove and the number of elements to remove. We have called the function ‘removeItem(index)’ giving the index value of the item that we wanted to be removed, this will remove the items from the ‘items’ array.
Example: Below is an example that showcases the removal of an item from an array in AngularJS Scope using the splice method.
HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>
Remove and Add Items to Array
</title>
<link rel="stylesheet"
type="text/css"
href="styles.css">
<style>
h1.geeks-heading {
color: green;
}
h3.approach-heading {
color: black;
}
</style>
<script src=
</script>
<script src="app.js"></script>
</head>
<body ng-controller="myCtrl">
<div class="container">
<h1 class="geeks-heading">
<center>
GeeksforGeeks
</center>
</h1>
<h3 class="approach-heading">
Approach 1: Using `splice` to Remove an Array Item
</h3>
<p>
Click the "Remove" button to remove
an item from the Array.
Add new items below:
</p>
<ul>
<li ng-repeat="item in items">
{{ item }}
<button ng-click="removeItem($index)">
Remove
</button>
</li>
</ul>
<div class="input-container">
<input type="text"
ng-model="newItem"
placeholder="Add a new item to Array">
<button class="add-button"
ng-click="addItem()">
Add
</button>
</div>
</div>
</body>
</html>
|
CSS
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
h1 {
color: green;
font-weight: bold;
margin-bottom: 20px;
}
.container {
background-color: #fff;
border: 1px solid #ddd;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 5px 0;
padding: 5px;
background-color: #f0f0f0;
border: 1px solid #ddd;
display: flex;
justify-content: space-between;
align-items: center;
}
button {
background-color: #ff0000;
color: #fff;
border: none;
cursor: pointer;
}
.input-container {
display: flex;
align-items: center;
margin-top: 20px;
}
input[type="text"] {
flex-grow: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.add-button {
background-color: #4CAF50;
color: #fff;
border: none;
cursor: pointer;
padding: 10px 20px;
margin-left: 10px;
}
|
Javascript
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.items =
['C++', 'Java', 'Python', 'JS'];
$scope.newItem = '';
$scope.removeItem = function (index) {
var removedItem = $scope.items.splice(index, 1)[0];
console.log("Removed Item:", removedItem);
};
$scope.addItem = function () {
if ($scope.newItem.trim() !== '') {
$scope.items.push($scope.newItem);
$scope.newItem = '';
}
};
});
|
Output:
Using the ‘filter’ method to Remove an Array Item
In this approach, we are using the filter method for removing the array element or item in the AngularJS scope. The ‘filter’ method in AnngularJS initially creates a new array with all the items that pass the function. We also can use this method, to create a new array that excludes the site, that we want to remove. We call the ‘removeItem(itemToRemove) with the item that we want to remove, this is going to create the new array that contains the all items excluding the one we want to remove.
Example: Below is an example that showcases the removal of an item from an array in AngularJS Scope using the filter Method.
HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>
Remove Items from Array - Approach 2
</title>
<link rel="stylesheet"
type="text/css"
href="styles.css">
<style>
h1.geeks-heading {
color: green;
}
h3.approach-heading {
color: black;
}
</style>
<script src=
</script>
<script src="app.js"></script>
</head>
<body ng-controller="myCtrl">
<div class="container">
<h1 class="geeks-heading">
GeeksforGeeks
</h1>
<h3 class="approach-heading">
Approach 2: Using `filter` to Remove an Item
</h3>
<p>
Click the "Remove" button to remove
an item from the array list:
</p>
<ul>
<li ng-repeat="item in items">
{{ item }}
<button ng-click="removeItem(item)">
Remove
</button>
</li>
</ul>
<div class="input-container">
<input type="text"
ng-model="newItem"
placeholder="Add a new item">
<button class="add-button"
ng-click="addItem()">
Add
</button>
</div>
</div>
</body>
</html>
|
CSS
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.container {
background-color: #fff;
border: 1px solid #ddd;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
width: 400px;
}
h1 {
color: green;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 5px 0;
padding: 10px;
background-color: #f0f0f0;
border: 1px solid #ddd;
display: flex;
justify-content: space-between;
align-items: center;
}
button {
background-color: #ff0000;
color: #fff;
border: none;
cursor: pointer;
}
.input-container {
display: flex;
align-items: center;
margin-top: 10px;
}
input[type="text"] {
flex-grow: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.add-button {
background-color: #4CAF50;
color: #fff;
border: none;
cursor: pointer;
padding: 10px 20px;
margin-left: 10px;
}
|
Javascript
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.items = ['C++', 'Angular', 'Spring', 'Java'];
$scope.newItem = '';
$scope.removeItem = function (item) {
$scope.items = $scope.items.filter(function (i) {
return i !== item;
});
console.log("Removed Item:", item);
};
$scope.addItem = function () {
if ($scope.newItem.trim() !== '') {
$scope.items.push($scope.newItem);
$scope.newItem = '';
}
};
});
|
Output:
Share your thoughts in the comments
Please Login to comment...