私のAPI経由でデータを送信できません

Question

私は簡単なトドゥーアプリを作っています。私はバックエンドのフロントエンドとnodejの角度を使用しています。いくつかのデバッグをした後、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); 
     }); 
    }; 

もう1つの問題は、$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}] 

を訪れたとき、私は最初のものは、私から作成された取得結果です追加ボタンをクリックして入力ボックスを開き、2番目はPostmanとPost要求を送信し、名前の値が何であるかを伝えることで作成されました。

Answer 1

[EDITED]は、あなたが.使用し、あなたの入力を変更して確認して試してみました：

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>