Add new row in a table using ng-repeat

Question

I have one table in that am trying to do following functions:

Initially one empty row and add button will be there.
When I click add button after entering details in first row, new row should be added and the first row value also should be displayed.

My code below:

var app = angular
    .module("myApp", [])
    .controller("myCtrl", function ($scope, $http, $timeout) {
        $scope.addContactDetail = function () {
            $scope.contactDetails = {
                email: $scope.contactDetail.email,
                bolId: $scope.contactDetail.billId

            };
        }
    });

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

.addbtn{
    text-align: center;
    background-color: #ededed;
    padding-top: 10px;


}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">

<div>
    <table class="table table-striped table-bordered dataTable ">
        <thead>
        <tr>
            <th>Email</th>
            <th>B#</th>

        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="contactDetail in contactDetails">
            <td><label><input type="text" ng-model="contactDetail.email"/></label></td>
            <td>
                    <span class="onoffswitch margin-left-zero">
                        <input type="checkbox" class="onoffswitch-checkbox toggleSwitch"
                               id="bill"
                               ng-model="menu.create"/> 
                         <label class="onoffswitch-label" for="bill"> 
                         <span class="onoffswitch-inner" data-swchon-text="YES" data-swchoff-text="NO"></span> <span
                                 class="onoffswitch-switch"></span>
                        </label>
                    </span>
            </td>

        </tr>
        <tr>
            <td><label><input type="text" ng-model="contactDetail.email"/></label></td>
            <td>
                        <span class="onoffswitch margin-left-zero">
                            <input type="checkbox" class="onoffswitch-checkbox toggleSwitch"
                                   id="bill"
                                   ng-model="menu.create"/> 
                             <label class="onoffswitch-label" for="bill"> 
                             <span class="onoffswitch-inner" data-swchon-text="YES" data-swchoff-text="NO"></span> <span
                                     class="onoffswitch-switch"></span>
                            </label>
                        </span>
            </td>

        </tr>
        </tbody>

    </table>
    <div class="addbtn" ng-click="addDetail()">
        <span>ADD</span>
    </div>
</div>
</body>

When I click add button after entering data in first row, 3 new rows are being added before the first row. What's wrong?

see [this](https://stackoverflow.com/questions/32470928/angular-formly-adding-form-fields-dynamically-on-user-click/35603088#356030881) — Hadi J, Aug 04 '17 at 10:55
jQuery needs to be included before AngularJS in your page. Also you used `onclick` instead of `ng-click`. [Here](https://jsfiddle.net/8y00umcf/) is a forked working fiddle of your example. — 31piy, Aug 04 '17 at 10:56

score 2 · Accepted Answer · answered Aug 04 '17 at 12:30

You have 3 new rows added, since you are adding 3 properties to the $scope.contactDetails object and ngRepeat iterates over them. You simply can have an array of contactDetails and add new item to this array in your addContactDetail method, like this:

var app = angular
    .module("myApp", [])
    .controller("myCtrl", function ($scope) {
        //first row initially empty
        $scope.contactDetails = [{}];
    
        $scope.addContactDetail = function () {
          //add more empty rows
            $scope.contactDetails.push({});
        }
    });

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

.addbtn{
    text-align: center;
    background-color: #ededed;
    padding-top: 10px;
    padding-bottom: 10px;
    border-style: solid;
    border-color: #b3b3b3;
    border-width: 0px 1px 1px 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">

<div>
    <table class="table table-striped table-bordered dataTable ">
        <thead>
        <tr>
            <th>Email</th>
            <th>B#</th>

        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="contactDetail in contactDetails">
            <td><label><input type="text" ng-model="contactDetail.email"/></label></td>
            <td>
     <span class="onoffswitch margin-left-zero">
      <input type="checkbox" class="onoffswitch-checkbox toggleSwitch"
                               id="{{contactDetail.bolId + 'Bol'}}"
                               ng-model="menu.create"/> 
       <label class="onoffswitch-label" for="{{contactDetail.bolId + 'Bol'}}"> 
       <span class="onoffswitch-inner" data-swchon-text="YES" data-swchoff-text="NO"></span> <span
                                 class="onoffswitch-switch"></span>
      </label>
     </span>
            </td>

        </tr>
        </tbody>

    </table>
    <div class="addbtn" ng-click="addContactDetail()">
        <span>ADD</span>
    </div>
</div>
</body>

@user7397787 Your `contactDetails` array was not bound to `$scope` object and is initialized every time the add method is called, that is why `ngRepeat` doesn't show the added rows. Take a look at [this working fiddle](https://jsfiddle.net/j1rwovzm/2/). — Stanislav Kvitash, Aug 07 '17 at 10:23

Add new row in a table using ng-repeat

1 Answers1

Linked