Create Todo List Using AngularJS Properties

on June 9, 2017
🔥 6143 views
Contents hide
1) Implementation
2) To-Do Form
3) To-Do Angular App
3.1) Predefined Task list
4) Implementing To-Do Form

In this tutorial, we will see how to Create Todo List Using AngularJS Properties. We will be using AngularJS directives and some Bootstrap Classes to make fancy.

Check out the demo on how to Create Todo List Using AngularJS Properties.



Implementation

To create a Todo list we will be using the AngularJS and the Bootstrap(optional) for design purpose.
let’s start with implementing the dependencies.

Next, create two files index.html and app.js
Now let’s include the required files into our index.html

index.html

<html>
	<head>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	</head>
	
	<body>
		<!-- Our App Goes Here -->
		
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
		<script src="app.js"></script> <!-- Custome Script -->
	</body>
</html>

Here you can see we have included Angular.min.js and our main app.js at bottom of the page, and the bootstrap.min.css at the top of the page.

And if you are using the package manager(npm) you can download through a command in terminal:

BASH

$ npm install angular --save // AngularJS

$ npm install [email protected] --save // Latest Bootsrap v 3.x.x

To-Do Form

Now let’s first create our to-do list demo form for taking value from the user.

index.html

<body class="container">

	<h2>My Todo List</h2>

	<form>
	    <input type="text" size="50" placeholder="Add New">
	    <input class="btn btn-success" type="submit" value="Add New">
	</form>

	<br>

	<div>
	    <input type="checkbox"> <span class="task"></span>
	</div>

	<button class="btn btn-danger">Remove marked</button>

</body>

You might be thinking where the logical part in it. As it is a template for our to-do app that makes us think where to perform the logical part so let us see further.

To-Do Angular App

As above we create a file named app.js, so let’s create our app by giving any specific name for the angular application and its controller

app.js

var app = angular.module('myApp', []); // app name

//controller name
app.controller('todoCtrl', function($scope) {
    
});

Now let’s begin with the functioning part in which that it can create a list and also it can delete a marked data from the list.

app.js

var app = angular.module('myApp', []); 
app.controller('todoCtrl', function($scope) {
    $scope.todoList = []; // Stores Task

    $scope.todoAdd = function() {
    	//put the Task into list
        $scope.todoList.push({todoText:$scope.todoInput, done:false}); 
        $scope.todoInput = ""; //reset the input text field
    };

    //For Removing Task From List 
    $scope.remove = function() {
        var oldList = $scope.todoList;
        $scope.todoList = [];
        angular.forEach(oldList, function(x) {
            if (!x.done) $scope.todoList.push(x);
        });
    };
});

As you can see above, $scope.todoList = []; will collect the data from the field after the ‘Add’ button is being hit!, And the function todoAdd will put some actions in the form of adding and removing data from our to-do list.

 

Predefined Task list

What if you want to add a similar task daily, To make it less handy we can set our custom task in $scope.todoList = []; in our app like:


    // Predefined Task (Stores list)
    $scope.todoList = [{todoText:'Eat', done:false},
                      {todoText:'Sleep', done:false},
                      {todoText:'Code', done:false},
                      {todoText:'Repeat', done:false}];

This will already make a task whenever the app is loaded.

Implementing To-Do Form

After completing the functionality of the app, now we will bind the functions of the app in our to-do form.
We will be using some of the AngularJS directive i.e ng-app,
ng-controller, ng-repeat, ng-modal, ng-click, ng-bind

index.html

<html>
	<head>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	</head>

	<body class="container" ng-app="myApp" ng-controller="todoCtrl">

		<h2>My To-do List</h2>

		<form ng-submit="todoAdd()"><!-- to-do form -->
			<input type="text" ng-model="todoInput" size="50" placeholder="Add New"> 
			<input class="btn btn-success" type="submit" value="Add New">
		</form>
		<!-- task list goes here -->
		<div ng-repeat="x in todoList">
			<input type="checkbox" ng-model="x.done"> <span class="task" ng-bind="x.todoText"></span>
		</div>
		<!-- Remove Button -->
		<button class="btn btn-danger" ng-click="remove()">Remove marked</button>

		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
		<script src="app.js"></script>
	</body>
</html>
Tags: , , , ,