submit複数の入力が動的に作成されたAngularJSフォーム

Question

JSON配列のオブジェクトごとに3つの入力のセットを生成しています。これは、2つのオブジェクトに対してどのようにこれを行うかを示す単純なモックアップです。私はすべての入力をどのように取得し、それを「AngularJSの方法」に提出するかを理解できないようです。最初の2つのnumber入力はng-valueをng-model以上に使用することを選択しました。これは、前者がブートストラップと実際に醜い方法で衝突するためです。

標準フォームと同じように、すべての入力値を取得して提出する簡単な方法はありますか？

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


    }]); 

Answer 1

あなたの入力はオブジェクトにバインドされる必要があります。あなたはng-modelディレクティブでそれを行います。この例を見てみましょう：http://jsfiddle.net/krvom1ja/

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

これはあなたのフォームデータであると仮定すると、あなたは同じ場所にすべてを保ちます。フォームを送信すると、$ scope.dataを取得するだけです。

また、入力のあなたの配列は、実際の配列である（キーbを見て）