角NG-模型FORMDATA不工作

所以这是我的控制器：角NG-模型FORMDATA不工作

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

expenses.controller('mainController', function($scope, $http){ 
$scope.formData = {}; 

$http.get('/api/transactions').then(function(data){ 
    $scope.transactions = data.data; 
    console.log(data.data); 
}, function(error){ 
    console.log(error) 
}); 

$scope.createTransaction = function() { 
    console.log($scope.formData) 
    $http.post('/api/transactions', $scope.formData).then(function(data) { 
     $scope.formData = {}; 
     $scope.transactions = data.data; 
     console.log(data.data); 
    }, function(data) { 
     console.log('Error: ' + data); 
    }); 
}; 
})

这是我的html：

<div id="mdlInputExpense" class="modal"> 
     <div class="modal-content"> 
      <h4>Create a new expense</h4> 
      <div class="row"> 
      <form class="col s12" ng-submit="createTransaction()"> 
       <div class="row"> 
        <div class="input-field col s6"> 
         <input placeholder="Shop" id="shop" type="text" class="validate autocomplete" ng-model="formData.shop"> 
         <label for="shop">Shop</label> 
        </div> 
        <div class="input-field col s6"> 
         <input placeholder="Category" id="category" type="text" class="validate autocomplete" ng-model="formData.category"> 
         <label for="category">Category</label> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="input-field col s12"> 
        <input placeholder="Amount of money" id="amount" type="number" class="validate" ng-model="formData.amount"> 
        <label for="amount">Amount of money</label> 
        </div> 
       </div> 
       <button type="submit" class="waves-effect waves-green btn-flat">Submit</a> 
      </form> 
     </div> 
     </div> 
     <div class="modal-footer"> 
      <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Submit</a> 
     </div> 
    </div>

当我点击提交按钮，我希望FORMDATA到包含将数据用于发送到服务器。每当我检查内容时，它只显示{}，因此它不包含任何数据。

我在body标签上得到了ng-controller =“mainController”，所以这不是问题。

编辑1

app.post('/api/transactions', function(req, res) { 
console.log(req.body) 
Transaction.create({ 
    category : req.body.category, 
    shop: req.body.shop, 
    amount: req.body.amount, 
    direction: 'String', 
}, function(err, todo) { 
    if (err){ 
     res.send(err); 
     console.error(err); 
     return; 
    } 

    Transaction.find(function(err, transactions) { 
     if (err) 
      res.send(err) 
     res.json(transactions); 
    }); 
}); 
});

来源

2017-05-03 Giani Noyez

你有没有创建$ scope.formData属性的绑定之前的观点？ –

在“开发人员工具控制台”中显示“网络选项卡”中的内容什么请求包含？还要确保它的空的更好的日志作为'console.log（JSON.stringify（$ scope.formData））'，因为开发人员工具实时更新日志 – Leguest

@Leguest在网络选项卡我没有看到POST发生，只有事后获取。 –

它工作正常，在EAY我看到它。这里是链接jsbin：http://jsbin.com/bafalawaje/edit?html,js,console,output
// HTML JS斌创建一个新的支出店类别钱金额提交提交

//js 
angular 
.module('app', []) 
.controller('ctrl', function($scope){ 
    console.log('created') 
    $scope.formData = {}; 
    $scope.createTransaction = function(){ 
    console.log($scope.formData.shop); 
    } 
})

来源

2017-05-03 16:28:04

角NG-模型FORMDATA不工作

回答

相关问题