dynamically create add form clicking add button in angularjs

Question

I want to create dynamic form field after i clicked to add row button.

<form name="form" class="form-validation form-inline" >
<div class="form-group">

    {!!
    Form::text('name',null,['class'=>'form-control','placeholder'=>'Name','data-ng-model'=>'name','required'=>'required'])
    !!}

    {!!
    Form::text('description',null,['class'=>'form-control','placeholder'=>'Description','data-ng-model'=>'description'])
    !!}

</div>
<div class="form-group">
    <button class="btn btn-default " ng-disabled="form.$invalid"
            data-ng-click="addTag()">
        Add
    </button>
</div>

Add row

  <div ng-repeat="input in form">
                                <form name="form" class="form-validation form-inline">
                                    <div class="form-group">

                                        {!!
                                        Form::text('name',null,['class'=>'form-control','placeholder'=>'Name','data-ng-model'=>'input.name','required'=>'required'])
                                        !!}

                                        {!!
                                        Form::text('description',null,['class'=>'form-control','placeholder'=>'Description','data-ng-model'=>'input.description'])
                                        !!}

                                    </div>
                                    <div class="form-group">
                                        <button class="btn btn-default " ng-disabled="form.$invalid"
                                                data-ng-click="addTag()">
                                            Add
                                        </button>
                                    </div>

                                </form>
                                    </div>

And the controller section is like after edited. How should i add them in to database? Angularjs controller:

$scope.addTag = function () {
    var tag = {
        name: $scope.name,
        description: $scope.description
    };

    $http.post('tags', tag)
        .success(function (data) {
            console.log('www.sabin.info.np');
            $scope.tags = data;
            $scope.name = '';
            $scope.description = '';
        }).error(function (err) {
        console.log('error');
    });
};

and the code that i have edited is:

 $scope.form = [];
$scope.addRow = function() {
    $scope.form.push({
        name: '',
        description: ''
    });
}

add row field

Answer 1

First you need to initialize the scope of the input form by specifying an array of object. Ex:

$scope.form = [];

After that, simply add this function to your controller :

$scope.addRow = function() {
   $scope.form.push({
      name: '',
      description: ''
   });
}

And use ng-repeat to iterate the form

<div ng-repeat="input in form">
   <input ng-model="input.name" />
   <input ng-model="input.description" />
</div>

[UPDATED]

So, I supposed you want to send the data that was inputed in each row to the backend with the endpoint of /tags. Here's how:

Actually all the form data was stored in $scope.form, which is an array of object with name and description attributes inside each of the object. So if you want to access the name/description value of the first row, you can access the value through $scope.form[0].name and $scope.form[0].description.

So the right method of sending the data is :

In HTML:

<div ng-repeat="input in form">
    <input ng-model="input.name" />
    <input ng-model="input.description" />
    //You pass the input object throught the function params
    <button ng-click="addTag(input)">Add Tag</button> 
</div>

In Controller :

$scope.addTag = function (input) {
    $http.post('tags', input)
        .success(function (data) {
            console.log('www.sabin.info.np');
        }).error(function (err) {
        console.log('error');
    });
};