AngularJS Todo Application
In this post, we are going to write Todo application in AngularJS.This application is not integrated with the database so you can consider it as the front end of Todo application.
Before going through this code you should know basics of AngularJS.
angular.min.js, bootstrap.min.js and bootstrap.css are external dependency.Bootstrap is used to make the application responsive.
Below is the code for Todo application
todo.html
<!doctype html>
<html ng-app="myApp">
<head>
<title>My Angular App</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<style>
.strike {
text-decoration: line-through;
}
</style>
<script type="text/javascript">
var myToApp=angular.module("myApp",[]);
var toDoList=[{task:'Go for walk',done:false,status:false}];
myToApp.controller('myCtrl',function($scope){
$scope.todo = toDoList;
$scope.addTask=function(){
$scope.todo.push({task:$scope.mtask,done:false,status:false});
};
$scope.removeTask=function(index){
$scope.todo.splice(index, 1)
};
$scope.markDone=function(index){
$scope.todo[index]={task:$scope.todo[index].task,done:true,status:true};
};
});
</script>
</head>
<body ng-controller="myCtrl">
<h1 align="center">TO DO TASK
<span class="label label-default">{{todo.length}}</span>
</h1>
<div class="form-group col-sm-4">
<input type="text" id="entertask" class="form-control input-sm-6" ng-model="mtask"/>
<input type="button" id="addtask" value="Add Task" class="btn-success" ng-click="addTask()"/>
</div>
<table class="table table-striped" >
<thead>
<tr>
<th>My Task</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="mytask in todo">
<td>{{$index+1}}</td>
<td><span ng-class="{strike:mytask.status }" ng-bind="mytask.task"></span></td>
<td><button type="button" id="markdone" ng-click="markDone($index)" class="btn btn-success btn-sm">
Mark Done
</button>
</td>
<td><button type="button" id="removetask" ng-click="removeTask($index)" class="btn btn-failure btn-sm">
<span class="glyphicon glyphicon-remove-circle"></span> Delete
</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Give your suggestion in comments.
If you like the post Share with your friends on social network.
Form Validation in AngularJS
AngularJS Todo Application
Reviewed by JavaInstance
on
11:12:00 AM
Rating:
Reviewed by JavaInstance
on
11:12:00 AM
Rating:
No comments: