Angular 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包含将用于发送到服务器的数据。每当我检查内容时,它都会显示{},因此不包含任何数据。

我在身体标签上得到了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);
    });
});
});

它可以正常工作,我看到了。这是链接到JSBIN:http://jsbin.com/bafalawaje/edit?html,JS,Console,output
//html JS bin 创建新费用 店铺 类别 金钱数额 提交 提交

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

最新更新