CODEWITHSUNDEEP
angularjs
Kay
Kay

Reputation: 144

Form text not adding in the todo array

I am making a todo app using AngularJS but my new task is not adding in the array. Can anybody please help me? I am new to 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;

});

Upvotes: 0

Views: 41

Answers (2)

Sajeetharan
Sajeetharan

Reputation: 222682

There were few changes in your code, you have not defined the variables and function properly. Some of the corrections are here,

$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 = '';
}

Here is the working Plunker

Upvotes: 1

Thiyagu
Thiyagu

Reputation: 17900

There are a few problems in your code

Repleace var addTodo = function() with $scope.addTodo = function()

Replace text:formNext with text:$scope.formNext

Both addTodo() and formNext are bound by the $scope with html

Upvotes: 0

Related Questions