Senden von Daten über meine API funktioniert nicht

Question

Ich mache eine einfache Todo-App. Ich verwende Angular für das Frontend und Nodejs für das Backend. Nach dem Debuggen kann ich nun Daten mit Postman in meine mongodb-Datenbank schreiben, aber wenn ich es auf meiner Website mache, wird ein neues Objekt in der Datenbank erstellt, aber ohne die Werte, die ich dem Objekt gegeben habe.

Das ist mein Modell und wie ich mit der Datenbank verbinden:

var mongoose.connect('mongodb://localhost:27017/tododb'); 
var Todo = mongoose.model('Todo', { 
name: String }); 

und hier ist, wie ich die Anfrage behandeln:

app.post('/api/todos', function(req, res){ 
    Todo.create({name: req.body.name, checked: false}, 
    function(err, todo){ 
    if(err) res.send(err); 
    Todo.find(function(err, todos){ 
     if(err) res.send(err); 
     res.json(todos); 
    }); 
    }); 
}); 

Ich bin auch bodyparser die Daten zu behandeln mit:

app.use(bodyParser.urlencoded({ extended: true })); 

Dies ist meine Funktion auf dem Frontend (AngularJS):

$scope.formData = {};  
$scope.addTodo = function() { 
    $http.post('/api/todos', $scope.formData) 
     .success(function(data) { 
      $scope.todos = data; 
      $scope.formData = {}; // clear the form so our user is ready to enter another 
      console.log(data); 
     }) 
     .error(function(data) { 
      console.log('Error: ' + data); 
     }); 
    }; 

Ein weiteres Problem ist, dass das $scope.formData = {} das Eingabefeld nicht löscht.

Und schließlich das ist der Teil meiner HTML-Datei, die die todos zeigt:

<h1>Things you have to do</h1> 
    <li ng-repeat="todo in todos"> 
    <p id="todobox"> {{ todo.name }} </p> 
    </li> 
    <form> 
    <input type="text" placeholder="I need to do..." ng-model="newTodo"> 
    <button ng-click="addTodo()">Add</button> 
    </form> 

Dies ist das Ergebnis, das ich bekomme, wenn ich localhost:300/api/todos

[{"_id":"57275afef11dc77b17a90eda","__v":0}, 

{"_id":"57275b5ef11dc77b17a90edb","name":"test from postman","__v":0}] 

Der erste Besuch erstellt wurde von meiner Eingabefeld durch Klicken auf die Schaltfläche Hinzufügen, das zweite wurde erstellt, indem eine Postanforderung mit Postman gesendet und der Wert des Namens angegeben wurde.

Answer 1

[EDITED] Haben Sie versucht, Ihre Eingabe zu ändern und sicherstellen, dass Sie verwenden, um eine .:

JS

$scope.info = {todos:[], newPost:{name:''}};  
$scope.addTodo = function() { 
    $http.post('/api/todos', $scope.info.newPost) 
    .success(function(data) { 
     $scope.info.todos = data; 
     $scope.info.newPost = {}; // clear the form so our user is ready to enter another 
     console.log(data); 
    }) 
    .error(function(data) { 
     console.log('Error: ' + data); 
    }); 
}; 

HTML

<h1>Things you have to do</h1> 
    <li ng-repeat="todo in info.todos"> 
    <p id="todobox"> {{ todo.name }} </p> 
    </li> 
    <form> 
    <input type="text" placeholder="I need to do..." ng-model="info.newPost"> 
    <button ng-click="addTodo()">Add</button> 
    </form> 

Answer 2

Es sieht aus wie Sie zu viele Variablen müssen Speichern Sie die Daten. Sie erwarten, dass es in formData gespeichert wird, aber es ist tatsächlich in newTodo gespeichert.

Ihre HTML sollte wie folgt aussehen:

<form> 
    <input type="text" placeholder="I need to do..." ng-model="formData.name"> 
    <button ng-click="addTodo()">Add</button> 
</form>