динамически создавать добавить форму, нажав кнопку добавления в angularjs

Question

Я хочу создать динамическое поле формы после того, как я нажал, чтобы добавить кнопку строки.

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

Добавить ряд

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

И секция контроллера, как после отредактирован. Как добавить их в базу данных? Angularjs контроллер:

$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'); 
    }); 
}; 

и код, который я редактировал это:

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

add row field

Answer 1

Прежде всего, необходимо инициализировать сферу формы ввода, указав массив объекта. Пример:

$scope.form = []; 

После этого, просто добавить эту функцию к контроллеру:

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

и использовать нг-повтор итерировать форме

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

[ОБНОВЛЕНО]

Итак, я предположил, что вы хотите отправить данные, которые были введены в каждую строку, на бэкэнд с конечной точкой /tags. Вот как это делается:

Фактически все данные формы были сохранены в $scope.form, который представляет собой массив объектов с name и description атрибутами внутри каждого объекта. Поэтому, если вы хотите получить доступ к значению имени/описания первой строки, вы можете получить доступ к значению через $scope.form[0].name и $scope.form[0].description.

Так правильный способ отправки данных является:

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

В контроллере:

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