通過我的api發送數據不起作用

Question

我正在製作一個簡單的待辦事項應用程序。我使用angular作爲前端，nodejs作爲後端。在做一些調試之後，我現在可以使用Postman將數據發佈到我的mongodb數據庫，但是當我在我的網站上執行該操作時，正在數據庫上創建一個新對象，但沒有給出該對象的值。

這是我的模型，我如何連接到數據庫：

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

，這裏是我如何處理請求：

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

我還使用bodyparser處理數據：

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

這是我對前端功能（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); 
     }); 
    }; 

另一個問題是$scope.formData = {}沒有清除輸入字段。

而且最後這是一個顯示待辦事項我的HTML文件的一部分：

<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> 

這是結果我得到當我訪問localhost:300/api/todos

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

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

第一個從創造了我通過點擊添加按鈕來輸入框，第二個是通過發送郵遞員發送郵件請求並告訴其名稱值是什麼來創建的。

Answer 1

將帖子你有沒有試圖改變你的輸入，並確保您使用的是.：

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

看起來你有太多的變量，存儲數據。您預計它將存儲在formData中，但它實際上存儲在newTodo中。

你的HTML應該是這樣的：

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