Simple Todo Application with Angular js
We are going to create simple Todo Application with basic CRUD operation with angular 1.x. here is the basic initial of angular js latest version
<html>
<header>
</header>
<body ng-app="myTodoApp">
<div ng-controller="TodoCtrl">
<h2>Angular Todo Application</h2>
<!-- application goes here -->
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.min.js"></script>
<script src="app.js"></script>
</html>
var app = angular.module('myTodoApp',[]);
app.controller("TodoCtrl", function($scope){
$scope.todoInput = "";
$scope.todos = [];
});
now update the $scope.todos with sample todo objects to pre load.
var app = angular.module('myTodoApp',[]);
app.controller("TodoCtrl", function($scope){
$scope.todoInput = "";
$scope.todos = [
{
todo:'simple todo',
completed:false
},
{
todo: 'try with developemnt',
completed: true
}
];
});
repeat our todo list in html using ng-repaeat as follows
<div ng-controller="TodoCtrl">
<h2>Angular Todo Application</h2>
<!-- application goes here -->
<div class="listtodos">
<ul>
<li ng-repeat="todoitem in todos">
{{todoitem.todo}}
</li>
</ul>
</div>
</div>
also need to create close icon button for each completed todo to remove from the todo list.in this case i’m using close as follows
{{todoitem.todo}} <span>x</span>
create addtodo form using ng-submit
<form ng-submit="todoAdd()">
<input type="text" ng-model="todoInput" placeholder="Add New">
<input type="submit" value="Add New">
</form>
then create function to add todo items to the todolist. we are using angular scope function to trigger it
var app = angular.module('myTodoApp',[]);
app.controller("TodoCtrl", function($scope){
$scope.todoInput = "";
$scope.todos = [
{
todo:'simple todo',
completed:false
},
{
todo: 'try with developemnt',
completed: true
}
];
$scope.todoAdd = function() {
$scope.todos.push({
todo: $scope.todoInput,
completed: false
});
$scope.todoInput = "";
}
});
without any issue we can add todos to the given todo array now we have to check completed todo by adding checkbox
<li ng-repeat="todoitem in todos">
<li ng-repeat="todoitem in todos">
<input type="checkbox" ng-model="todoitem.completed"> {{todoitem.todo}}
<span ng-click="todoRemove($index)">x</span>
</li>
</li>
also we need to perform the remove each todo item when it completed only.using ng-show we can trigger it as folllows. inside the ng-repeat parse the $index array index value to identify exact value to remove.
$scope.todoRemove = function(item) {
$scope.todos.splice(item,1);
}
now we use small tricky for allow remove button only completed items. how we can do…. we use ng-show directive as follows.
<ul>
<li ng-repeat="todoitem in todos">
<input type="checkbox" ng-model="todoitem.completed"> {{todoitem.todo}}
<span ng-show="todoitem.completed" ng-click="todoRemove($index)">x</span>
</li>
</ul>
now you can see when the remove button appear according to the checkbox value.
Application almost done and we can rap it with some css and make it nice.
using Bootstrap for styling todo app
<div ng-controller="TodoCtrl">
<div class="container">
<h2>Angular Todo Application</h2>
<!-- application goes here -->
<div class="listtodos">
<ul class="list-group">
<li class="list-group-item" ng-repeat="todoitem in todos">
<input type="checkbox" ng-model="todoitem.completed"> {{todoitem.todo}}
<span class="badge badge-primary badge-pill float-right" ng-show="todoitem.completed" ng-click="todoRemove($index)">
X
</span>
</li>
</ul>
</div>
<div class="formtodo m-3">
<form class="form-inline" ng-submit="todoAdd()">
<div class="form-group mx-sm-3 mb-2">
<input class="form-control" type="text" ng-model="todoInput" placeholder="Add New">
</div>
<button type="submit" class="btn btn-primary mb-2">Add</button>
</form>
</div>
</div>
</div>
