用許多動態創建的輸入提交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表格

回答

相關問題