How to make empty an array using AngularJS ?
Last Updated :
01 Aug, 2022
Given an array & the task is to make empty an array or delete all the elements from the array in AngularJS. In order to do this, there are 2 ways i.e., either use the [] notation to reinitialize the array which eventually removes all the elements from the array, or set the length of the array to 0 by using length property, which also empty the array.
We will explore both the approaches & understand them through the illustrations.
Approach: In this case. arr =[] will create a new array & assign a reference to it to a variable, while any other reference will remain unaffected that still points to the original array.
Example 1: This example illustrates empty an array using the [] notation in AngularJS.
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
"//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js" >
</ script >
< script >
var myApp = angular.module("app", []);
myApp.controller("controller", function ($scope) {
$scope.arr = ['Geek', 'GeeksforGeeks', 'gfg'];
$scope.emptyArr = function () {
$scope.arr = [];
};
});
</ script >
</ head >
< body style = "text-align:center;" >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< h3 >
How to empty an array in AngularJS
</ h3 >
< div ng-app = "app" >
< div ng-controller = "controller" >
Array = {{arr}}< br >< br >
< button ng-click = 'emptyArr()' >
Clear Array
</ button >
</ div >
</ div >
</ body >
</ html >
|
Output:
Approach: In this case, arr.length = 0 manipulates the array itself, i.e., basically deleting everything from the array & while accessing the array with the help of different variables, then we will get the modified array.
Example 2: This example illustrates setting the array length to 0 using length property, which specifies an empty array.
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
"//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js" >
</ script >
< script >
var myApp = angular.module("app", []);
myApp.controller("controller", function ($scope) {
$scope.arr = ['Geek', 'GeeksforGeeks', 'gfg'];
$scope.emptyArr = function () {
$scope.arr.length = 0;
};
});
</ script >
</ head >
< body style = "text-align:center;" >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< h3 >
How to empty an array in AngularJS
</ h3 >
< div ng-app = "app" >
< div ng-controller = "controller" >
Array = {{arr}}< br >< br >
< button ng-click = 'emptyArr()' >
Clear Array
</ button >
</ div >
</ div >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...