Push New Elements in ng-repeat Array in AngularJS using JavaScript splice() Method

I have written an article before on how to Push new elements inside an ng-repeat array from AngularJS $scope. In that example, I would take inputs from two textboxes and add the values in the array from my controller. Now, here in this quick post I’ll show you with an example on how to add or push new elements in between existing ng-repeat array list.

In the previous example however, the new elements would add at the end of the array list. Here is the demo of that previous example.

This is another scenario. I wish to add or push new items at a random location inside an existing ng-repeat array list. Say for example, I have a list of Five elements, and I wish to add the new element at the 3rd index (position) in the array.

See this demo

This is very simple. I’ll use JavaScript splice() method to add new items to the array. All I need to know is the index or the location (position) where I want to see the new item in the list. I’ll provide values to the splice() method dynamically in my controller.

For my example, I’ll have two input boxes (textboxes) and a button. The first textbox will allow you to select a number (as index for the array), and in the second textbox you will enter a value (a product).

The View and the $Scope

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <style>
        body {
            font:15px Arial;
        }
        h3 {margin:10px 0;}
        ul {
            display:inline;
            list-style-type:none;
            padding:0;
        }
        li, input {
            text-transform:uppercase;
        }
    </style>
</head>

<body>
    <!--THE VIEW.-->
    <div ng-app="myApp" 
        
        ng-init="list=[
            { name:'HP' }, 
            { name:'IBM' }, 
            { name:'LENOVO' }]"
            
        ng-controller="myController">

        <div style="float:left;padding:10px;margin:0 auto;">
            <h3>List of Products</h3>
            <ul ng-repeat="products in list">
                <li>{{ products.name }}</li>
            </ul>
        </div>

        <div style="float:left;margin:30px;">
            <p><input type="number" ng-model="location" placeholder="1" value="1" style="width:80px;" /></p>
            <p><input type="text" ng-model="name" placeholder="Enter an Item" /></p>

            <p><button ng-click="add()">Add Product to List</button></p>
        </div>
    </div>
</body>

<script>
    var myApp = angular.module('myApp', []);

    myApp.controller(
        'myController',
        ['$scope', function ($prod) {

            $prod.add = function () {
                if (angular.isDefined($prod.name) && $prod.name != '') {

                    if (angular.isDefined($prod.location)) {

                        // ADD NEW ITEM IN BETWEEN EXISTING ITEMS USING
                        // JAVASCRIPT splice() METHOD.
                        $prod.list.splice($prod.location, 0, { name: $prod.name });

                        // CLEAR THE FIELDS.
                        $prod.name = '';
                        $prod.location = "";
                    }
                }
            }
        } ]
    );
</script>
</html>

Try it

👉 How to check if a value or reference is defined inside AngularJS $scope

The splice() Syntax

The JavaScript splice() method takes three parameters.

array.splice(index, howmany, item1,.....,itemX)

1) index: The first parameter is the index or location where I wish to add my new item. I’ll get the value for the index using $prod.location. That’s the first input box.

2) howmany: The number of items that I need to remove. The value I have assigned in 0, which means it will remove any item from the list.
Note: Add a number more than Zero to see what happens.

3) item: The third parameter is the item. { name: $prod.name }

See this demo

← PreviousNext →