我正在尝试将费用对象传递给提交功能。 但它没有传递输入值
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>
&#13;
答案 0 :(得分:1)
您正在向您的操作发送JSON obejct,但它在Url Params中期待它。您可以在此处ParamSerializer引用您的查询。 所以angular从1.4.1开始提供$ httpParamSerializerJQLike服务
$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 */ });
请检查我可能错过的逗号的语法。
答案 1 :(得分: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>