Question

我正在使用AngularJS创建一个todo应用程序，但我的新任务不是在数组中添加。有人可以帮帮我吗？我是AngularJS的新手。

HTML： -

<div class="add">
    <form>
        <input class="add-input" placeholder="Add Tasks.." ng-model="formNext"/>
         <button class="add-btn" ng-click="addTodo()"><h2>Add</h2></button>
    </form>
</div>

JS： -

var todoApp = angular.module("todoModule",[]);

todoApp.controller("todoController",function($scope){

var todos = [

        {text:"Learn JavaScript",done:false},
        {text:"Learn JavaScript",done:false},
        {text:"Learn AngularJs",done:false}

];

var getTotalTodos = function(){

    return todos.length;
}

var addTodo = function(){

    $scope.todos.push({text:formNext,done:false});
    $scope.formNext = '';
}
$scope.todoList = "";
$scope.message = "Hello World!";
$scope.todos = todos;
$scope.getTotalTodos = getTotalTodos;

}）;

Answer 1

您的代码几乎没有变化，您没有正确定义变量和功能。一些更正在这里，

$scope.formNext ='';
$scope.todos = [

        {text:"Learn JavaScript",done:false},
        {text:"Learn JavaScript",done:false},
        {text:"Learn AngularJs",done:false}

];

$scope.getTotalTodos = function(){

    return $scope.todos.length;
}

$scope.addTodo = function(){

    $scope.todos.push({text:$scope.formNext,done:false});
    $scope.formNext = '';
}

这是工作Plunker

Answer 2

您的代码中存在一些问题

使用var addTodo = function()

重复$scope.addTodo = function()

将text:formNext替换为text:$scope.formNext

addTodo()和formNext都被$scope与html绑定

表单文本未添加到todo数组中

2 个答案: