Question

我做过Todo应用程序。有3个功能： 1.查看 2.添加Todo 3.删除Todo 我尝试添加updateTodo函数但它不起作用。请帮忙检查一下代码。请参阅我的代码如下： Todo Application HTML Page

的index.html

<!DOCTYPE html>
<html ng-app="todoApp">
    <head>
        <title>Angular Todo Application</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="styles/bootstrap/css/bootstrap.min.css">
        <script src="js/angular/angular.min.js"></script>
        <script src="js/app.js"></script>
        <script src="js/services/TodoService.js"></script>
        <script src="js/dependencies/sails.io.js"></script>
    </head>
    <body>
        <div class="container" ng-controller="TodoCtrl">
            <div class="jumbotron">
            <h1 align="center">Todo Application</h1>
            <br>
            <div id="todo-form" class="row">
                <div class="col-sm-8 col-sm-offset-2 text-center">
                    <form>
                        <div class="form-group">
                            <input type="text" class="form-control input-lg text-center" placeholder="Add Todo!" ng-model="formData.value"><br>
                            <button type="submit" class="btn btn-primary btn-lg" ng-click="addTodo()">Add Todo</button>
                        </div>
                    </form>
                </div>
            </div>
         </div>
            <div id="todo-list" class="row">
                <div class="col-sm-4 col-sm-offset-4">
                    <div class="checkbox" ng-repeat="todo in todos">
                        <form class="form-inline">
                            <input type="checkbox" ng-click="removeTodo(todo)">
                            <input type="text" class="form-control input-sm" ng-model="todo.value">

                                <button type="submit" class="btn btn-primary btn-sm" ng-click="updateTodo()">Update Todo</button>
                        </form> 

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

app.js

'use strict';
   var todoApp = angular.module('todoApp',[]);
   todoApp.controller('TodoCtrl', ['$scope', '$rootScope', 'TodoService',
   function($scope, $rootScope, TodoService) {
    $scope.formData = {};
    $scope.todos = [];
    TodoService.getTodos().then(function(response) {
        $scope.todos = response;
     })
    $scope.addTodo = function() {
        TodoService.addTodo($scope.formData).then(function(response) {
        $scope.todos.push(response)
        $scope.formData = {};
        }) 
    }
    $scope.removeTodo = function(todo) {
        TodoService.removeTodo(todo).then(function(response) {
        $scope.todos.splice($scope.todos.indexOf(todo), 1)
       })
    }
    $scope.editTodo = function(todo) {
        TodoService.editTodo(todo).then(function(response) {
        $scope.todos.splice(i$scope.todos.indexOf(todo), 1, response)
        })
    }
}])

TodoService.js

todoApp.service('TodoService', function($http, $q) {
     return {
       'getTodos': function() {
         var defer = $q.defer();
         $http.get('/todo').success(function(resp){
           defer.resolve(resp);
         }).error( function(err) {
           defer.reject(err);
         });
         return defer.promise;
       },
       'addTodo': function(todo) {
         var defer = $q.defer();
         $http.post('/todo', todo).success(function(resp){
           defer.resolve(resp);
         }).error( function(err) {
           defer.reject(err);
         });
         return defer.promise;
        },
       'removeTodo': function(todo) {
        var defer = $q.defer();
        $http.delete('/todo/'+todo.id, todo).success(function(resp){
           defer.resolve(resp);
        }).error( function(err) {
           defer.reject(err);
        });
         return defer.promise;
        },
       'updateTodo': function(todo) {
        var defer = $q.defer();
        $http.put('/todo/'+todo.id, todo).success(function(resp){
            defer.resolve(resp);
        }).error( function(err) {
            defer.reject(err);
        });
        return defer.promise;
        }
    }
})

Answer 1

我在app.js中看不到updateTodo()函数，该函数在行中调用

<button type="submit" class="btn btn-primary btn-sm" ng-click="updateTodo()">Update Todo</button>

我认为您应该在HTML

中将updateTodo()更改为editTodo()

如何更新AngularJS / SailsJS / MongoDB Todo应用程序？

1 个答案: