提交表单到文件angularjs

我正在尝试创建订单的动态表单。使用添加按钮，它会附加一个输入表单，以便您可以在必要时为每个订单添加更多产品。提交表单到文件angularjs

现在我想解析表格数据到JSON文件，但我该怎么做？

我使用field.product和field.amount为NG-车型，但它不工作，因为当我在一个产品在一个行类型，相同的文本是在试了一下所有其他行也是如此。

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

控制器：

'use strict'; 

angular.module('myApp.orderNew', ['ngRoute']) 

.config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/order/new', { 
    templateUrl: 'order-new/order-new.template.html', 
    controller: 'OrderNewCtrl' 
    }); 
}]) 

.controller('OrderNewCtrl', function($scope, $location, $http) { 

    $scope.field = { 
    amount: '1' 
    }; 

    $scope.rows = [{ 
    product: 'Product', 
    amount: 'Amount' 
    }]; 
    $scope.counter = 1; 

    $scope.addRow = function() { 
    $scope.rows.push({ 
     product: 'Product', 
     amount: 'Amount' 
    }); 
    $scope.counter++; 
    } 

    $scope.delRow = function(row) { 
    if ($scope.rows.length < 2) { return; } 

    $scope.rows.splice(row, 1); 
    } 

    $scope.cancelOrder = function() { 
    $location.path('/orders'); 
    } 

    $scope.createOrder = function() { 
    var data = $scope.fields; 
    alert(data); 
    //$post('/path_to_server', obj); 
    } 

    $http.get('orders.json').then(function(data) { 
    $scope.orders = data; 
    }); 

});

来源

2017-04-04 DowinskiField

我不是完全清楚你问什么，但它听起来像你希望你的模型，每一个对每个重复项独特的ng-repeat。如果是这样的情况下，我将设置ng-model“s到ng-model="field.product[$index]"和ng-model="field.amount[$index]"

来源

2017-04-04 19:55:09 kennypowers

让你的问题更清楚，但如果你想用submitform NG-点击，这里是解决

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

来源

2017-04-04 23:14:51 Akashii

提交表单到文件angularjs

回答

相关问题