CODEWITHSUNDEEP
javascriptangularjsjsonforms
DowinskiField
DowinskiField

Reputation: 133

Submitting form to file angularjs

I am trying to make a dynamic form for creating orders. With the add button it appends an input form so you can add more products per order when necessary.

Now I want to parse the form data to a JSON file, but how would I do that?

I've tried it with using field.product and field.amount as ng-models but it isn't working because when I type in a product in one row, the same text is in all the other rows as well.

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

Controller:

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

});

Upvotes: 1

Views: 49

Answers (2)

Akashii
Akashii

Reputation: 2281

make your question more clearly , but if you want submitform with ng-click , here is solution 

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

Upvotes: 2

kennypowers
kennypowers

Reputation: 199

I'm not completely clear what you're asking, but it sounds like you want your models to each be unique for each repeated item in ng-repeat. If that's the case I would set the ng-model's to ng-model="field.product[$index]" and ng-model="field.amount[$index]"

Upvotes: 2

Related Questions