Create To Do List Using AngularJS

Introduction

This article shows how to create a To Do List using AngularJS.

You can create many types of applications using AngularJS, here I show how to create another useful and easy to create application named "To Do List".

Using this application you can create a list of work that needs to be completed and can specify those works that are completed. This application will also show you how much work is still to be done.

Step 1

First of all you need to add an external Angular.js file to your application, "angular.min.js".

For this you can go to the AngularJS official site or can download my source code and then fetch it or you can click on this link to download it: ANGULARJS.

After downloading the external file you need to add this file to the Head section of your application.

</head>

Step 2

Now after adding the External JS file the first thing you need to do is to add ng-app in the <HTML> Tag otherwise your application will not run.

Now I will work on the View/JavaScript of this application.

Add this code to the head section:

function x($scope) {

$scope.schedule = [

{ work: 'Wash the Car', completed: true },

{ work: 'Meet Ajay', completed: false }];

$scope.addNew = function () {

$scope.schedule.push({ work: $scope.todoWork, completed: false });

$scope.todoWork = '';

};

$scope.pending = function () {

var count = 0;

angular.forEach($scope.schedule, function (todo) {

count += todo.completed ? 0 : 1;

});

return count;

};

}

</script>

Here I created three functions, the first is the main function to hold the two other functions and some initial values as well.

The second function is for adding new work to the To Do List.

The third function finds the pending work and counts how much is completed.

First I created a function named "x", in this function some initial values are declared under the variable "schedule".

After this a new function is created and named "addNew", this function will help to enter new work to the list.

At the end another function is created, "pending()"; this function will count the number of pending and total work and will show how much work is still pending of all the work.

Now our work on the View is completed and we can move to the ViewModel

Step 3

Write this code in the body section:

<span>{{pending()}} of {{schedule.length}} pending</span>

<ul>

</li>

</ul>

</div>

The function "x" is bound to a Div using the ng-controller.

After this a span is used bound to the value of the pending and the total length of work.

A dynamic list is created using the ng-repeat directive..

At the end a TextBox and a button is taken, the user can enter new work in the TextBox and as he clicks on the button this new work will be entered into the list.

Now our application is created and is ready for execution.

Output

On running the application you will get an output like this one:

Todo List

Here by default two work is shown, one of these is checked and is showing as completed. You can also see the remaining work and total work is also displayed by this application.

Now I will enter a new work and then will click on the button to add it into the list.

Todo List

Now as I click on the button the list will be updated along with the total number of work and the work that is still pending.

Todo List

The complete code of this application is as follows:

<style>

.completed-true {

text-decoration: line-through;

color: grey;

}

</style>

function x($scope) {

$scope.schedule = [

{ work: 'Wash the Car', completed: true },

{ work: 'Meet Ajay', completed: false }];

$scope.addNew = function () {

$scope.schedule.push({ work: $scope.todoWork, completed: false });

$scope.todoWork = '';

};

$scope.pending = function () {

var count = 0;

angular.forEach($scope.schedule, function (todo) {

count += todo.completed ? 0 : 1;

});

return count;

};

}

</script>

</head>

<body>

<span>{{pending()}} of {{schedule.length}} pending</span>

<ul>

</li>

</ul>

</div>

</form>

</body>

</html>