How to push elements in an array using AngularJS ?

Last Updated : 09 Aug, 2022

Given an array and the task is to perform the push operation on the array using AngularJS. The arr.push() method is used to push one or more values into the array, & new values will add at the end of an array. This method changes the length of the array by the number of elements added to the array & returns the new length of the modified array.

Syntax:

arr.push(element1, elements2 ....., elementN]])

Approach: In this approach, the push() method is used to insert the element at the end of the array. In the first example, a static value ‘Geek’ is inserted in the array, and in the second example, an input box is provided to the user to push the value they want.

Example 1: In this example, we will push the “Geek” & add the new element to the array arr.

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 = ['GFG', 'GeeksforGeeks']; 
            $scope.val = "Geek"; 
            $scope.push = function () { 
                $scope.arr.push($scope.val); 
            }; 
        }); 
    </script> 
</head> 
  
<body style="text-align:center;"> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
    <h3> 
        How to push element in 
        array in AngularJS 
    </h3> 
    <div ng-app="app"> 
        <div ng-controller="controller"> 
            value to push - "{{val}}"<br> 
            Array = {{arr}}<br><br> 
            <button ng-click='push()'> 
                Click to push 
            </button> 
        </div> 
    </div> 
</body> 
</html>

Output:

Example 2: This example describes the addition of a new element to an array to the array list by specifying the value in the input section.

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 = ['GFG', 'GeeksforGeeks']; 
            $scope.push = function () { 
                // get the input value 
                var inputVal = $scope.arrInput; 
                $scope.arr.push(inputVal); 
  
            }; 
        }); 
    </script> 
</head> 
  
<body style="text-align:center;"> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
    <h3> 
        How to push element in 
        array in AngularJS 
    </h3> 
    <div ng-app="app"> 
        <div ng-controller="controller"> 
            Input here: 
            <input type="text" 
                   name="arrExample" 
                   ng-model="arrInput"> 
            <br><br> 
            Array = {{arr}}<br><br> 
            <button ng-click='push()'> 
                Click to push 
            </button> 
        </div> 
    </div> 
</body> 
</html>