CODEWITHSUNDEEP
htmlangularjsjson
V Jayanth Reddy
V Jayanth Reddy

Reputation: 101

how to generate json data for a form fields in angularjs

I am new to JSON data so please help me out!! I have single web page with multiple forms which are validated using angularjs, I want to generate JSON data for the fields in that forms.So which methods should be used to generate JSON data and post syntax for that methods.

my html code is like

<td >
<input type="text"  style="width:100px" ng-model="cost"  ng-disabled="status!=true" required>
</td>
<td >
<input type="text"  style="width:110px" ng-model="price" ng-disabled="status!=true" required>
</td>

My angularjs code is

  var validationApp = angular.module('validationApp', ['ngFlag']);

// create angular controller
validationApp.controller('mainController', function($scope) {

$scope.style
{
    $scope.buttonCSS= "clicked";
};
$scope.style2
{
}
$scope.invoice = {
    items: [{
         loyality: [{name:'points'},{name:'credits'}],
         value:0,
    period: [{name:'activity1'},{name:'activity2'}]
        }],
        items1:[{currency: [{name:'point'},{name:'credit'}],   value1:0   }]

};
 });

Upvotes: 2

Views: 2442

Answers (2)

Thalaivar
Thalaivar

Reputation: 23622

Read about ng-model and how two way binding works.

<input type="text" ng-model="yourobj.name"  />
<form name="myForm" ng-click="submit()">

And in your controller, you could grab the form input fields like below. 

(function(){

   angular.module("yourapp").controller(['$scope', function(){

     $scope.submit=function(){
        var jsonData = $scope.yourObj;  
        console.log(jsonData); 
     }

   }])

})();

Upvotes: 2

Malkus
Malkus

Reputation: 3726

Angular allows you to bind your ng-model fields as part of an object. So instead of binding each form field to an individual value. Make them each an attribute in a single object.

<input type="text" ng-model="myForm.productName"/>

<input type="text" ng-model="myForm.productCount"/>

You then have a JSON object myForm that has all the values from your form and can be accessed from the controller.

Upvotes: 3

Related Questions