Question

我正在尝试将费用对象传递给提交功能。但它没有传递输入值

＆＃13;

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

＆＃13;

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

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

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

Answer 2

您使用的是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>

无法在角度函数中传递值

2 个答案: