提交表單到文件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

回答

相關問題