Question

我试图创建一个可扩展的表单来创建开/关指令，用户可以在配对中提交时间，因此我的HTML默认为一对，并且用户可以使用按钮添加其他对，但是当我提交时角形仅读取第一个配对，有人可以指出我在这里缺少什么吗？我是否在附加字段中添加了不正确的内容？

HTML

<div class="timing">
  <form class="timingSelect" action="index.html" method="post">
    <div class="inputField">
      <div class="form-group">
        On: <input type="number" ng-model="recipe.on1" value="" step=".1">
      </div>
      <div class="form-group">
        oz: <input type="number" ng-model="recipe.oz1" value="" readonly="readonly">
      </div>
      <div class="form-group">
        Off: <input type="number" ng-model="recipe.off1" value="" step='.1'>
      </div>
    </div>
    <!-- <input type="submit" ng-click="createRecipe(recipe)" value="Generate Recipe"> -->
  </form>
    <button type="submit" ng-click="createRecipe(recipe)">Submit</button>


</div>
<button type="button" class="next" name="button" ng-click="addColumn()">+</button>

JS：

    app.controller('CreateRecipeController', ['$scope', '$location', '$routeParams', 'DashFactory', function($scope, $location, $routeParams, DashFactory){
  console.log("entered Create Recipe controller");

  var columnCount = 1;

  $scope.addColumn = function addColumn(){
    columnCount++;
    console.log('attempting to create column');
    var d = document.createElement("div");
    d.className = "inputField";
    var f = document.createElement("form");
    f.setAttribute('method',"post");
    f.setAttribute('action',"submit.php");
    var d2 = document.createElement("div");
    d2.className = "form-group"
    var i = document.createElement("input"); //input element, text
    i.setAttribute('type',"number");
    i.setAttribute('ng-model',"recipe.on"+columnCount);
    i.setAttribute('value',"");

    var d3 = document.createElement("div");
    d3.className = "form-group"
    var s = document.createElement("input"); //input element, Submit button
    s.setAttribute('type',"number");
    s.setAttribute('ng-model',"recipe.oz"+columnCount);
    s.setAttribute('value',"");
    s.setAttribute('readonly','readonly')

    var d4 = document.createElement("div");
    d4.className = "form-group"
    var t = document.createElement("input"); //input element, Submit button
    t.setAttribute('type',"number");
    t.setAttribute('ng-model',"recipe.off"+columnCount);
    t.setAttribute('value',"");

    d.appendChild(f);
    f.appendChild(d2);
    f.appendChild(d3);
    f.appendChild(d4);
    d2.appendChild(i);
    d3.appendChild(s);
    d4.appendChild(t)

    document.getElementsByClassName('timingSelect')[0].appendChild(d);
  }

  $scope.createRecipe = function(recipe){
    console.log('recieved recipe data', recipe);
    DashFactory.createRecipe(recipe)
  }


}
]);

Answer 1

好极了-只需将所有按钮移动到表单标签内即可，如下面的代码

    <div class="timing">
      <form class="timingSelect" action="index.html" method="post">
        <div class="inputField">
          <div class="form-group">
            On: <input type="number" ng-model="recipe.on1" value="" step=".1">
          </div>
          <div class="form-group">
            oz: <input type="number" ng-model="recipe.oz1" value="" readonly="readonly">
          </div>
          <div class="form-group">
            Off: <input type="number" ng-model="recipe.off1" value="" step='.1'>
          </div>
        </div>
         <button type="submit" ng-click="createRecipe(recipe)">Submit</button>
         <button type="button" class="next" name="button" ng-click="addColumn()">+</button>
      </form>
  </div>

在添加新输入字段时不要添加其他表单，只需将所有新输入添加到现有表单中，然后尝试再次提交-这可能有用

谢谢-编码愉快！！

表单未从动态添加的字段中获取数据

1 个答案: