Question

我正在按照教程使用MEAN堆栈创建一个简单的待办事项应用程序。一切都工作正常，直到我将控制器和服务移动到单独的文件中。现在我可以创建一个新的待办事项，但它没有获得文本值。我可以在我的mongoDB数据库中看到已创建一个新条目，但它没有文本值。我一直在查看我的代码，但我找不到任何内容，也没有在浏览器的开发人员工具中收到任何错误或警告。以下是表单的代码：

<div id="todo-form" class="row">
  <div class="col-sm-8 col-sm-offset-2 text-center">
    <form>
      <div class="form-group">
        <!-- Bind this value to formData.text in Angular -->
        <input type="text" class="form-control input-lg text-center" placeholder="Add a todo" ng-model="formData.text">
      </div>
      <button type="submit" class="btn btn-primary btn-lg" ng-click="createTodo()">Add</button>
    </form>
  </div>
</div>

这是我的服务：

 //todos.js service
//the service is meant to interact with our api
angular.module('todoService', [])
  //simple service
  //each function returns a promise object
  .factory('Todos', function($http){
    return {
      get : function() {
        return $http.get('/api/todos');
      },
      create : function(todoData){
        return $http.post('/api/todos', todoData);
      },
      delete : function(id){
        return $http.delete('/api/todos/' + id);
      }
    }
  });

这是我使用该服务的主控制器：

    //main.js
var myApp = angular.module('todoController', []);
myApp.controller('mainController', ['$scope', '$http', 'Todos', function($scope, $http, Todos){
  $scope.formData = {};

  //GET
  //get all the todos by using the service we created
  Todos.get()
    .success(function(data){
      $scope.todos = data;
    });
  //CREATE
  $scope.createTodo = function(){
    Todos.create($scope.formData)
          .success(function(data){
            $scope.formData = {};
            $scope.todos = data;
          });
    }

  //DELETE
  $scope.deleteTodo = function(id){
    Todos.delete(id)
      .success(function(data){
        $scope.todos = data;
      });
  };
}]);

最后，这是创建待办事项的路线：

var Todo = require('./models/todos');

//expose our routes to our app with module exports
module.exports = function(app){
  //api
  //get all todos
  app.get('/api/todos', function(req, res){
    Todo.find(function(err, todos){
      if(err)
        res.send(err);
      res.json(todos);
    });
  });

  //create to do
  app.post('/api/todos', function(req, res){
    Todo.create({
      text: req.body.text,
      done: false
    }, function(err, todo){
      if(err)
        res.send(err);

      //get and return all todos after creating the new one
      Todo.find(function(err, todos){
        if(err)
          res.send(err);
        res.json(todos);
      });
    });
  });

回顾一下，由于某种原因，formData.text值没有存储在某个地方，我不知道为什么。

Answer 1

我不能肯定地说有角度但普通的HTML表单输入需要提交名称属性

为什么表单不是从表单中发送文本值？

1 个答案: