How to Push New Elements in Between an Existing ng-repeat Array from AngularJS $scope 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.

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 Markup
<!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>
The $Scope
<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>

Demo

Also Read: AngularJS “isDefined()” Method

The JavaScript splice() method takes three parameters.

The “splice()” Syntax

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 }

Well, that’s it. Thanks for reading.

Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner
Tweet this article Facebook Google+
comments powered by Disqus

Join our Google Plus Community and be a part of a discussion!