通过我的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>