動態創建添加表單點擊添加按鈕在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: '' 
    }); 
} 

而使用NG-重複迭代形式

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

[增訂]

所以，我想你想要將每行輸入的數據發送到端點爲的後端。方法如下：

實際上所有的表單數據都存儲在$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'); 
    }); 
};