Push New Elements Inside an ngRepeat Array from AngularJS $scope

← PrevNext →

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
AngularJS $scope example

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.
Bind JSON array to Table in AngularJS

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

See this demo

That’s it. Thanks for reading.

← PreviousNext →