Push New Elements Inside an ngRepeat Array from AngularJS $scope

While working with AngularJS, we often use an ng-repeat directive to render a list of pre-defined items. I have previously written few articles where I explained the use of ng-repeat directive with various AngularJS filters. Here, in this article I’ll show you how to Push or Inject new elements inside an ng-repeat array from a $scope.

Here’s a simple scenario. I have a list of items stored in an array, which I have initialized using ng-init directive. The items in the array are books and their prices. I wish to show the list using ng-repeat, as it will loop through each item and displays it.

See this demo

Inside the model, I have two input boxes one each for entering a book and its price. I also have a button, whose click event will call a function inside the $scope object, which will get the newly entered values from input boxes and push the values inside the ng-repeat array list.

👉 How to Push new elements in between an existing ng-repeat Array from AngularJS $scope

The Markup

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js">
        </script>
    <style>
        h3 {margin:10px 0;}
        ul {
            display:inline;
            list-style-type:none;
            padding:0;
        }
    </style>
</head>
<body style="font:17px Consolas;">

    <!--THE VIEW.-->
    <div ng-app="myApp" 
        
        ng-init="list=[
            { name:'Computer Architecture', price:65 }, 
            { name:'Advanced Composite Materials', price:45 }, 
            { name:'Stategies Unplugged', price:43 }, 
            { name:'Teaching Science', price:50 }, 
            { name:'Challenging Times', price:22 }]"
            
        ng-controller="myController">

        <div style="float:left;padding:10px;margin:0 auto;">

            <h3>Books & Prices</h3>

            <!-- LOOP.-->
            <ul ng-repeat="books in list">
                <li>{{ books.name + ' - ' + (books.price | currency) }}</li>
            </ul>
        </div>

        <div style="float:left;margin:30px;">
            <input type="text" ng-model="name" placeholder="Enter the Book" /> -
            <input type="text" ng-model="price" placeholder="Enter a Price" />

            <p><button ng-click="add()">Add the Book</button></p>
        </div>
    </div>
</body>

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

    myApp.controller('myController', ['$scope', function ($book) {
            $book.add = function () 
            {
                if (angular.isDefined($book.name) && $book.name != '' && $book.price != '') 
                {
                    // ADD A NEW ELEMENT.
                    $book.list.push({ name: $book.name, price: $book.price });

                    // CLEAR THE FIELDS.
                    $book.name = '';
                    $book.price = '';
                }
            }
        }]
    );
</script>
</html>

Try it

Do you know you can easily bind JSON array 👇 to an HTML table in AngularJS? Check out this article.

Remember, it does not alter the array list, however, it injects new element with values inside the ng-repeat result.

See this demo

← PreviousNext →