Not able to pass value in angular function

Question

I am trying to pass expense object to submit function. But it is not passing entered value

            var app = angular.module('addApp', []);
            app.controller('addController', function($scope, $http) {
                  console.log("SAdfasd");
                  $scope.expense = {param:'',value:0,dt:'',description:''};
                   $scope.exp = ["One ", "Two", "Three"];
                  $scope.submit = function(data) {
                    console.log(data);
                    console.log($scope.expense);
                    $http({
                      method: 'POST',
                      url: 'added'
                      data: $scope.expense,
                      headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                      }
                    }).success(function(data, status, headers, config) {
                      console.log(data);
                    }).error(function(data, status, header, config) {
                        console.log(data);
                      }
                    });

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>

 <div class="col-lg-8 col-md-8" ng-app="addApp" ng-controller="addController">
<form id="addExpense" name="expenseForm" method="post">
  <div>
    <label>Expense Type</label>
    <select ng-model="expense.param" ng-options="x for x in exp" class="form-control"></select>
  </div>
  <div>
    <label>Amount</label>
    <input type="text" name="value" class="form-control" ng-bind="expense.value" placeholder="Enter your expense amount" />
  </div>
  <div>
    <label>Date</label>
    <input type="date" name="dt" class="form-control" ng-bind="expense.dt" placeholder="Select expense date" />
  </div>
  <div>
    <label>Description</label>
    <textarea rows="4" cols="50" name="description" ng-bind="expense.description" class="form-control" placeholder="Enter your expense description"></textarea>
  </div>
  <div>
  <button type="submit" class="btn btn-success form-control" ng-click="submit(expense)">Save</button>
</form>
</div>

Namdeo Karande · Answer 1 · 2017-07-17T11:51:17.977

You are sending JSON obejct to your action but it is expecting it in a Url Params. You can refer your query from here ParamSerializer. So angular provide $httpParamSerializerJQLike service since 1.4.1

$http({
url: 'added',
method: 'POST',
data: $httpParamSerializerJQLike(data), // Make sure to inject the 
service in to the controller
headers: {
'Content-Type': 'application/x-www-form-urlencoded' // header
}
}).then(function(response) { /* do something here */ });

Second way to do -

$http({
url: 'added',
method: 'POST',
data: 'param='+$scope.expense.param+'&value='+$scope.expense.value+'& dt='+$scope.expense.dt+ '& description='+$scope.expense.description   OR  'param='+encodeURIComponent($scope.expense.param)+'&value='+encodeURIComponent$scope.expense.value)+'& dt=+encodeURIComponent$scope.expense.dt)+ '& description='+encodeURIComponent$scope.expense.description)
service in to the controller
headers: {
'Content-Type': 'application/x-www-form-urlencoded' // header
}
}).then(function(response) { /* do something here */ });

Please check the syntax's for comma i might have missed .

I tried $httpParamSerializerJQLike(data) that is serializind the object but data in not displaying at server `data: $httpParamSerializerJQLike(data)` is there any more configuration — xrcwrn, Jul 17 '17 at 11:01
I have aupdated the answer..check it out. have you checked while using $httpParamSerializerJQLike(data) how is the data going from client side or does it giving any error. — Namdeo Karande, Jul 17 '17 at 11:52

score 1 · Accepted Answer · answered Jul 17 '17 at 09:52

You are using NgBind instead of that it should be NgModel :

var app = angular.module('addApp', []);
app.controller('addController', function($scope, $http) {  
      $scope.expense=
            {param:'',value:0,dt:'',description:''};
            
       $scope.exp = ["One ", "Two", "Three"];
       
       $scope.submit = function() {
                    //console.log(object);
                    console.log($scope.expense);
        }        
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>

 <div class="col-lg-8 col-md-8" ng-app="addApp" ng-controller="addController">
<form id="addExpense" name="expenseForm" method="post">
  <div>
    <label>Expense Type</label>
    <select ng-model="expense.param" ng-options="x for x in exp" class="form-control"></select>
  </div>
  <div>
    <label>Amount</label>
    <input type="text" name="value" class="form-control" ng-model="expense.value" placeholder="Enter your expense amount" />
  </div>
  <div>
    <label>Date</label>
    <input type="date" name="dt" class="form-control" ng-model="expense.dt" placeholder="Select expense date" />
  </div>
  <div>
    <label>Description</label>
    <textarea rows="4" cols="50" name="description" ng-model="expense.description" class="form-control" placeholder="Enter your expense description"></textarea>
  </div>
  <div>
  <button type="submit" class="btn btn-success form-control" ng-click="submit(expense)">Save</button>
</form>
</div>

Not able to pass value in angular function

2 Answers2