提交表单到文件angularjs

时间:2017-04-04 19:40:05

标签: javascript angularjs json forms

我正在尝试创建一个动态表单来创建订单。使用添加按钮,它会附加一个输入表单,以便您在必要时为每个订单添加更多产品。

现在我想将表单数据解析为 JSON 文件,但是我该怎么做?

我已经尝试使用 field.product field.amount 作为 ng-models ,但它不是'因为当我在一行中输入产品时,同样的文本也在所有其他行中。

\\ $app->withFacades();

控制器:

<form>
      <div class="form">
        <table>
            <tr ng-repeat="content in rows">
              <td>
                <input class="product" ng-model="field.product" placeholder="{{content.product}}" type="text">
              </td>
              <td>
                <input ng-model="field.amount" type="number" min="0" value="1" type="text">
              </td>
              <td>
                <button class="btn btn-primary btn-functionality btn-danger btn-del" ng-click="delRow($index)">x</input>
              </td>
            </tr>
        </table>

        <button class="btn btn-primary btn-success btn-add" ng-click="addRow()">+</button>
      </div>
      <div class="main-buttons">
        <button class="btn btn-primary btn-lg btn-create" ng-click="createOrder()">Create</button>
        <button class="btn btn-primary btn-lg" ng-click="cancelOrder()">Cancel</button>
      </div>
    </form>




  <div style="text-align: center; font-size: 20px; border: 2px solid red; margin: 20px" ng-repeat="order in orders.data track by $index">
    <div ng-repeat="product in order">
      {{product.product}}
      {{product.amount}}
    </div>

  </div>

2 个答案:

答案 0 :(得分:2)

我并不完全清楚你要问的是什么,但听起来你希望你的模型对于ng-repeat中的每个重复项都是唯一的。如果是这种情况,我会将ng-model&#39}设置为ng-model="field.product[$index]"ng-model="field.amount[$index]"

答案 1 :(得分:2)

更清楚地提出您的问题,但如果您希望使用ng-click提交表单,则此处为解决方案

  $scope.field={}
    $scope.createOrder = function(){
    $http({
     method:'post',
    url:'yoururl',
    data:$.param($scope.field),
    headers : { 'Content-Type': 'application/x-www-form-urlencoded' }

    }).then(onSuccess)
    function onSuccess(response){
    ///handle when success
    }
    }