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.

Also Read: How to Push New Elements in Between an Existing ng-repeat Array from AngularJS $scope

The Markup
<!DOCTYPE html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js">
        h3 {margin:10px 0;}
        ul {
<body style="font:17px Consolas;">

    <!--THE VIEW.-->
    <div ng-app="myApp" 
            { 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 }]"

        <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>

        <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>

    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 = '';
Try it

Also Read: How to Bind JSON Array or Data to an HTML Table in AngularJS using ng-repeat

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 →

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

Enter your email id

Delivered by FeedBurner

Related Posts: