用许多动态创建的输入提交AngularJS表格

我在JSON数组中为每个对象生成一组三个输入。这是一个简单的模型，展示了如何为两个对象执行此操作。我似乎无法弄清楚如何抓住所有的投入，并将其提交给“AngularJS方式”。请注意，我选择使用ng-value而不是ng-model来输入前两个number输入，因为前者以非常难看的方式与bootstrap相互冲突。用许多动态创建的输入提交AngularJS表格

是否有一些直接的方法来获取所有输入值并提交它们，就像使用标准表单一样？

HTML：

<form name="editForm" class="form-horizontal" ng-submit="saveEdit()"> 
<table class="edit_table table table-striped"> 
     <thead> 
      <tr> 
      <th class="action_name_cell">Action</th> 
      <th class="float_cell">Warning Threshold</th> 
      <th class="float_cell">Error Threshold</th> 
      <th class="toggle_cell">Enabled</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="row in edit_rows()"> 
      <td class="action_name_cell">test</td> 
      <td class="float_cell"> 
       <div class="form-group"> 
       <div class="col-sm-8"> 
       <input type="number" class="form-control" name="{{row.threshold_id}}_warningDecimal" 
         placeholder="10.0" ng-value="row.warning" 
         ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" 
         step="0.1" required /> 
       </div> 
       </div> 
      </td> 
      <td class="float_cell"> 
       <div class="form-group"> 
       <div class="col-sm-8"> 
       <input type="number" class="form-control" name="{{row.threshold_id}}_errorDecimal" 
         placeholder="10.0" ng-value="row.error" 
         ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" 
         step="0.1" required /> 
       </div> 
       </div> 
      </td> 
      <td class="toggle_cell"> 
       <label></label><input name="{{row.threshold_id}}_enabled" type="checkbox" ng-checked="row.enabled" data-toggle="toggle"> 
      </td> 
      </tr> 
     </tbody> 
     </table> 
    <div class="base_button_wrapper"> 
    <button type="submit" class="btn btn-success">Save</button> 
    <button ng-click="cancelEdit()" type="button" class="btn btn-default">Cancel</button> 
    </div> 
</form>

JS：

angular.module('rtmApp') 
    .controller('EditCtrl', ['$scope', '$location', '$window', '$timeout', 
    function ($scope, $location) { 

     // Change views and show the main view 
     $scope.cancelEdit = function() { 
     $location.path('/'); 
     }; 

     // Save, confirm success, then show the main again 
     $scope.saveEdit = function() { 
     console.log('Here is the data we are saving...'); 
     // Let's see if we can see the data we are saving/submitting here: 
     console.log("? How do I get all the data ?"); 
     $location.path('/'); 
     }; 


     var dummyEditJSON = [{ 
          "threshold_id": 1, 
          "action_id": 1, 
          "action_name": "fast_preview", 
          "site_id": 1, 
          "site_name": "test_site", 
          "warning": 3.5, 
          "error": 5.0, 
          "enabled": true 
          }, 
          { 
          "threshold_id": 2, 
          "action_id": 2, 
          "action_name": "bill_cgi", 
          "site_id": 1, 
          "site_name": "test_site", 
          "warning": 2.6, 
          "error": 4.2, 
          "enabled": false 
          } 
         ]; 
     $scope.edit_rows = function() { 
     return dummyEditJSON; 
     }; 


    }]);

来源

2017-08-16 JacobIRR

嗨@jacobIRR我没有太多的时间去创造一个合适的回答，但我认为这篇文章可以帮助你：HTTPS： //scotch.io/tutorials/building-dynamic-angular-forms-with-ngrepeat-and-ngform –

谢谢@GeneParcellano，但该主题中的注释与我有同样的未答复的问题（如何实际提交数据） – JacobIRR

你输入必须绑定到一个对象。你用ng-model指令来做到这一点。看看这个例子：http://jsfiddle.net/krvom1ja/

$scope.data = { 
     a: 'a', 
     b: [{ 
     v: 'b' 
     }, { 
     v: 'c' 
     }] 
    }

假设这是你的表单数据，你把它全部在同一个地方。然后，当您提交表单时，您只需抓取$ scope.data。

而且，您的输入数组是一个实际的数组（看关键b）

来源

2017-08-17 00:16:55 yBrodsky

谢谢，一旦我在任何地方都使用ng-model，这个结果很好。 – JacobIRR

用许多动态创建的输入提交AngularJS表格

回答

相关问题