Question

我正在尝试从运行时动态创建的表单中存储数据。

请考虑我是.js的铁杆菜鸟

我有想法用这样的类附加HTML：

<div class="formElement"> some code here </div>

...每次用户点击一个按钮。

这一切都很棒，但我仍然坚持使用每个角度/ jquery来获取值这些div然后将它们解析为与viewmodel类匹配的json格式。你能帮我把所有这些都搞定吗？

每个div中的类型是：

选择列表
号码输入
文字输入

html代码

<div ng-app="formExample" ng-controller="ExampleController">

    <button class="btn btn-primary" ng-controller="addRow" ng-click="addLine()">Dodaj przycisk</button>

    <form novalidate class="simple-form">
        <div class="here">
            <div class="formElement">
                Klasa:<select class="optns" ng-model="user.class">
                    <option selected value="1"> Rodzaj... </option>
                    <option value="2">2</option>
                    @*tutaj beda dodane opcje*@
                </select>
                Ilość: <input type="number" ng-model="user.number" value=""/><br />
                Uwagi: <input type="text" ng-model="user.text" value=""/><br />
            </div>
        </div>
        <input type="button" ng-click="reset()" value="Reset" />
        <input type="submit" ng-controller="addRow" ng-click="getValues()" value="Save" />
    </form>
    <pre>user = {{user | json}}</pre>
    <pre>master = {{master | json}}</pre>
</div>

角度代码

var app = angular.module('formExample', []);

app.controller('ExampleController', ['$scope', function ($scope) {
  $scope.master = {};
  $scope.nrofrows = 0;

  $scope.update = function(user) {
      $scope.master = angular.copy(user);



      $scope.another = angular.copy()
  };

  $scope.reset = function() {
    $scope.user = angular.copy($scope.master);
  };

  $scope.reset();
}]);
 app.controller('addRow', function ($scope) {

        $scope.getValues = function () {




            var allInputs = $(':input');

            @* przy selected ewentualnie jeszcze zamiania :select na klase/id*@
            var selected = $(".optns option:selected").each(function ($scope) {
                $scope.arraySels.push($(this));
            });
                var quantities = $('.formElement :input').attr['number'].each(function () {
                    $scope.arrayQuants.push($(this));
                });

                var texts = $('.formElement :input').attr['text'].each(function () {
                    $scope.arrayTexts.push($(this));
                });

                alert("works" + $scope.arrayQuants);
        };

Answer 1

<div ng-app="formExample" ng-controller="ExampleController">
 <form novalidate class="simple-form">
    <div class="here">
        <div class="formElement">
            Klasa:<select class="optns" ng-model="user.class">
                <option selected value="1"> Rodzaj... </option>
                <option value="2">2</option>
                @*tutaj beda dodane opcje*@
            </select>
            Ilość: <input type="number" ng-model="user.number" value=""/><br />
            Uwagi: <input type="text" ng-model="user.text" value=""/><br />
        </div>
    </div>
    <input type="button" ng-click="reset()" value="Reset" />
    <input type="submit"  ng-click="update()" value="Copy" />
</form>
<pre>user = {{user | json}}</pre>
<pre>master = {{master | json}}</pre>
</div>

var app = angular.module('formExample', []);

app.controller('ExampleController', ['$scope', function($scope) {
$scope.master = {};
$scope.user = {};
$scope.nrofrows = 0;

$scope.update = function(user) {
$scope.master = {};
angular.copy($scope.user, $scope.master);
};
}]);

请查看此Demo。我认为这会对您有所帮助

Answer 2

我不熟悉angular，但是如果你使用的是jQuery，你只需使用serializeArray()方法来获取表单数据。

.serializeArray()

说明： 将一组表单元素编码为名称和值数组。

只需确保将name属性添加到input元素。

由于您的form元素是动态创建的，因此您可以通过委派事件为其添加提交事件处理程序。

$(document).on('submit', '.simple-form', function(e) {...

每当submit事件为triggert时，您都可以将事件目标传递给getValues函数以序列化表单数据。

这是一个纯粹的jQuery示例，希望它有所帮助。

$(document).on('submit', '.simple-form', function(e) {
  getValues(this);
  e.preventDefault();
})

var getValues = function (currForm) {
  var formData = $(currForm).serializeArray();
  console.log(formData);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="formExample" ng-controller="ExampleController">

  <button class="btn btn-primary" ng-controller="addRow" ng-click="addLine()">Dodaj przycisk</button>

  <form novalidate class="simple-form">
    <div class="here">
      <div class="formElement">
        Klasa:<select name="select" class="optns" ng-model="user.class">
        <option selected value="1"> Rodzaj... </option>
        <option value="2">2</option>
        @*tutaj beda dodane opcje*@
        </select>
        Ilość: <input name="num" type="number" ng-model="user.number" value=""/><br />
        Uwagi: <input name="user" type="text" ng-model="user.text" value=""/><br />
      </div>
    </div>
    <input type="button" value="Reset" />
    <input type="submit" value="Save" />
  </form>
</div>

如何使用.js从每个div获取值？

2 个答案: