How to add new row dynamically in angular

Question

I have one table. Initially there will be one empty row when I click on add new button after entering details, new row should be added.
I did this using jquery but I am little bit confused doing it in angular.

var app = angular.module('myApp', [])
app.controller('myController', function ($scope) {
    $scope.addNewRow = function (educationDetails) {
        $scope.personalDetails.push({
            'qualification': educationDetails.qualification,
            'education_type': educationDetails.education_type,
            'grade': educationDetails.grade,
            'university': educationDetails.university,
            'city': educationDetails.city,
            'country': educationDetails.country
        });
        //$scope.PD = {};
    };
})

<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.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController" ng-init="init()">
    <form id="myForm">
        <div class="row margin0">
            <input type="submit" class="btn btn-primary addnewRow pull-right" value="Add New" ng-click="addNewRow"> </div>
        <table class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>Qualification</th>
                    <th>Course</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="text" class="form-control" ng-model="educationDetail.qualification" required /> </td>
                    <td>
                        <input type="text" class="form-control" ng-model="educationDetail.education_type" required /> </td>
                    <td>
                        <button>save</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</div>

Any Help? Thanks!!

Vivz · Accepted Answer · 2017-11-29 06:14:12Z

3

You can declare an array to capture the value from each row of the input fields in the table. And when you click add new row, just push an empty object into your working array. The following is just primitive example to give you an idea of how to go on about this.

var app=angular.module('myApp',[])
app.controller('myController',function($scope){
$scope.educationDetails=[{}];
 $scope.addNewRow = function () {
        $scope.educationDetails.push({});
        //$scope.PD = {};
    };
})

<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.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController" ng-init="init()">
    <form id="myForm">
        <div class="row margin0">
            <input type="button" class="btn btn-primary addnewRow pull-right" value="Add New" ng-click="addNewRow()"> </div>
        <table class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>Qualification</th>
                    <th>Course</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="details in educationDetails">
                    <td>
                        <input type="text" class="form-control" ng-model="details.qualification" required /> </td>
                    <td>
                        <input type="text" class="form-control" ng-model="details.education_type" required /> </td>
                    <td>
                        <button>save</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <span>{{educationDetails}}</span>
    </form>
</div>

answered Nov 29, 2017 at 6:14

Vivz

6,6282 gold badges19 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

krish Over a year ago

If qualification is a dropdown.what can I do in that time?

Vivz Over a year ago

You can do the same thing. Bind the value of dropdown using ng-model to a key of your working array

Collectives™ on Stack Overflow

How to add new row dynamically in angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related