Angular ng-Modell Formdata nicht

arbeiten Also das ist mein Controller:Angular ng-Modell Formdata nicht

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

Und das ist mein 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>

Wenn ich den Absenden-Button klicken erwarte ich Formdata Daten enthalten, die werden verwendet werden, um an den Server zu senden. Wenn ich den Inhalt überprüfe, zeigt es nur {} an, also enthält es keine Daten.

Ich habe ng-controller = "mainController" auf dem Body-Tag, so dass das nicht das Problem ist.

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

Quelle

2017-05-03 Giani Noyez

Haben Sie nicht die $ scope.formData Unterkunft vor binden, um die Ansicht zu erstellen ?. –

Zeigen Sie, was auf der 'Registerkarte 'Netzwerk' in' Developer Tools-Konsole 'steht Welche Anfrage enthält? Um sicher zu gehen, dass sein leerer besser log als 'console.log (JSON.stringify ($ scope.formData))' weil Entwickler-Tools-Update-Protokoll in Echtzeit – Leguest

@Leguest in der Netzwerk-Registerkarte Ich sehe nicht die POST passiert, nur die GET danach. –

Es funktioniert gut, die eay ich es sehe. Hier Link zu jsbin: http://jsbin.com/bafalawaje/edit?html,js,console,output
// html JS Bin Erstellen Sie einen neuen Kosten Shop- Kategorie Geldbetrag Senden Senden

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

Quelle

2017-05-03 16:28:04

Angular ng-Modell Formdata nicht

Antwort

Verwandte Themen