Question

所以这是我的控制器：

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

Answer 1

它工作正常，我看到它。这里是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);
  }
})

Angular ng-model formdata不起作用

1 个答案: