Open In App

How to push elements in an array using AngularJS ?

Improve
Improve
Like Article
Like
Save
Share
Report

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>


Output:

 



Last Updated : 09 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads