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-repeat来迭代表单

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

动态创建添加表单点击angularjs中的添加按钮

1 个答案: