Question

我是MEAN的新手，我正在尝试制作一个简单的CRUD应用程序。我在我的_id上收到一个未定义的错误，我不明白为什么。这个变量与我称之为的其他函数一起工作。希望有人可以提供帮助。我在controller.js文件中的第117行收到错误

这是我的应用程序的controller.js代码

todoApp.controller('TodoCtrl', function($rootScope, $scope, todosFactory) {

  $scope.todos = [];
  $scope.isEditable = [];

  // get all Todos on Load
  todosFactory.getTodos().then(function(data) {
    $scope.todos = data.data;
  });

  // Save a Todo to the server
   $scope.save = function($event) {
    if ($event.which == 13 && $scope.todoInput) {

       todosFactory.saveTodo({
         "todo": $scope.todoInput,
         "isCompleted": false
      }).then(function(data) {
        $scope.todos.push(data.data);
      });
      $scope.todoInput = '';
    }
  };

  //update the status of the Todo
  $scope.updateStatus = function($event, _id, i) {
    var cbk = $event.target.checked;
    var _t = $scope.todos[i];
    todosFactory.updateTodo({
      _id: _id,
      isCompleted: cbk,
      todo: _t.todo
    }).then(function(data) {
      if (data.data.updatedExisting) {
        _t.isCompleted = cbk;
      } else {
        alert('Oops something went wrong!');
      }
    });
  };

  // Update the edited Todo
  $scope.edit = function($event, i) {
     if ($event.which == 13 && $event.target.value.trim()) {
      var _t = $scope.todos[i];
       todosFactory.updateTodo({
    _id: _t._id,
    todo: $event.target.value.trim(),
    isCompleted: _t.isCompleted
  }).then(function(data) {
    if (data.data.updatedExisting) {
      _t.todo = $event.target.value.trim();
          $scope.isEditable[i] = false;
        } else {
          alert('Oops something went wrong!');
        }
      });
    }
  };

  // Delete a Todo
  $scope.delete = function(i) {
    todosFactory.deleteTodo($scope.todos[i]._id).then(function(data) {
      if (data.data) {
        $scope.todos.splice(i, 1);
      }
    });
  };

});
todoApp.controller('TodoCtrl', function($rootScope, $scope, todosFactory) {

  $scope.todos = [];
  $scope.isEditable = [];

  // get all Todos on Load
  todosFactory.getTodos().then(function(data) {
    $scope.todos = data.data;
  });

  // Save a Todo to the server
  $scope.save = function($event) {
    if ($event.which == 13 && $scope.todoInput) {

      todosFactory.saveTodo({
        "todo": $scope.todoInput,
        "isCompleted": false
      }).then(function(data) {
        $scope.todos.push(data.data);
      });
      $scope.todoInput = '';
   }
  };

  //update the status of the Todo
  $scope.updateStatus = function($event, _id, i) {
    var cbk = $event.target.checked;
    var _t = $scope.todos[i];
    todosFactory.updateTodo({
      _id: _id,
      isCompleted: cbk,
      todo: _t.todo
    }).then(function(data) {
      if (data.data.updatedExisting) {
        _t.isCompleted = cbk;
      } else {
        alert('Oops something went wrong!');
      }
    });
  };

  // Update the edited Todo
  $scope.edit = function($event, i) {
    if ($event.which == 13 && $event.target.value.trim()) {
      var _t = $scope.todos[i];
      todosFactory.updateTodo({
        _id: _t._id,
        todo: $event.target.value.trim(),
        isCompleted: _t.isCompleted
      }).then(function(data) {
        if (data.data.updatedExisting) {
          _t.todo = $event.target.value.trim();
          $scope.isEditable[i] = false;
        } else {
          alert('Oops something went wrong!');
        }
      });
    }
  };

  // Delete a Todo
  $scope.delete = function(i) {
    todosFactory.deleteTodo($scope.todos[i]._id).then(function(data) {
      if (data.data) {
        $scope.todos.splice(i, 1);
      }
    });
  };

});

就是这种错误出现在我的factory.js代码或html中，我将包括两者。这是factory.js代码：

todoApp.factory('todosFactory', function($http){
    var urlBase = '/api/todos';
    var _todoService = {};

    _todoService.getTodos = function(){
        return $http.get(urlBase);
    };

    _todoService.saveTodo = function(todo){
        return $http.post(urlBase, todo);
    };

    _todoService.updateTodo = function(todo) {
        return $http.put(urlBase, todo);
    };

    _todoService.deleteTodo = function(id){
        return $http.delete(urlBase + '/' + id);
    };

    return _todoService;
});

这里是使用控制器和工厂的html部分：

<div class="container" ng-controller="TodoCtrl">
    <div class="row col-md-12">
        <div>
            <input type="text" class="form-control input-lg" placeholder="Enter a todo" ng-keypress="save($event)" ng-model="todoInput">
        </div>
    </div>

    <div class="row col-md-12 todos">
        <div class="alert alert-info text-center" ng-hide="todos.length > 0">
            <h3>Nothing Yet!</h3>
        </div>

        <div ng-repeat="todo in todos" class=" col-md-12 col-sm-12 col-xs-12" ng-class="todo.isCompleted ? 'strike' : ''">
            <div class="col-md-1 col-sm-1 col-xs-1">
                <input type="checkbox" ng-checked="todo.isCompleted" ng-click="updateStatus($event, todo._id, $index)">
            </div>
            <div class="col-md-8 col-sm-8 col-xs-8">
                <span ng-show="!isEditable[$index]">{{todo.todo}}</span>
                <input ng-show="isEditable[$index]" type="text" value="{{todo.todo}}" ng-keypress="edit($event)">
                <input ng-show="isEditable[$index]" type="button" class="btn btn-warning" value="Cancel" ng-click="isEditable[$index] = false" />
            </div>

            <div class="col-md-3 col-sm-3 col-xs-3" >
                <input type="button" class="btn btn-info" ng-disabled="todo.isCompleted" class="pull-right" value="edit" ng-click="isEditable[$index] = true" />
                <input type="button" class="btn btn-danger" class="pull-right" value="Delete" ng-   click="delete($index)" />
            </div>

        </div>  


</div>

Answer 1

此行必须是问题的原因：

<input ng-show="isEditable[$index]" type="text" value="{{todo.todo}}" 
 ng-keypress="edit($event)">

您忘记将$index作为edit函数的第二个参数传递。这应该解决它：

<input ng-show="isEditable[$index]" type="text" value="{{todo.todo}}" 
 ng-keypress="edit($event, $index)">

Node / AngularJS - TypeError：无法读取未定义的属性“_id”。

1 个答案: