動的にフォームを作成する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'); 
    }); 
}; 

iが編集したコードがある：あなたがオブジェクトの配列を指定することにより、入力フォームのスコープを初期化する必要

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

と利用ngのリピートをフォーム

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

を反復するために[UPDATED]

だから、私はあなたがのエンドポイントでバックエンドに各行に入力されたデータを送信すると思います。方法は次のとおりです。

実際には、すべてのフォームデータは、name,の各オブジェクト内にオブジェクトの配列である$scope.formに格納されています。したがって、最初の行の名前/説明値にアクセスする場合は、$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'); 
    }); 
};