无法通过angualr函数传递值

Question

我想通过费用对象提交函数。 但它不通过输入的数值

  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>

Answer 1

您正在使用NgBind，而不是它应该是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>

Answer 2

您发送JSON obejct到你的动作，但它期待它在一个网址参数。您可以从这里引用您的查询ParamSerializer。 所以角度提供$ httpParamSerializerJQLike服务，因为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 */ }); 

二的方式做 -

$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 */ }); 

请检查语法对逗号我可能会错过。