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

Answer 1

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>