Simple AngularJs Todo Project
HTML Code
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8" />
<title>Angular todo</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body ng-controller="TodoListController">
<div class="container">
<h2 class="list-group-item title">Angular simple todo application</h2>
<form ng-submit="addTodo()" class="list-group-item">
<input type="text" ng-model="todoText" />
<input type="Submit"/>
</form>
<div class="list-group-item" ng-show="todoText">
<input type="text" disabled="true" class="todo" placeholder="{{todoText}}" />
</div>
<div ng-repeat="todo in todos" class="list-group-item">
<input type="text" ng-model="todo.text" class="todo" />
<a href="#" ng-click="removeTodo($index)" class="btn btn-primary btn-xs">Delete</a>
</div>
</div>
</body>
</html>
CSS Code
.container{
width: 550px;
}
.title{
background: #f5f5f5;
}
.todo{
border: none;
}
AngularJS Code
function TodoListController($scope)
{
//initize lis of todo
$scope.todos = [];
//function to add new todo
$scope.addTodo = function(){
var newTodo = {done:false, text: $scope.todoText};
$scope.todos.push(newTodo);
$scope.todoText = ' ';
};
//function to remove form todo
$scope.removeTodo = function(start)
{
$scope.todos.splice(start, 1);
};
}
No comments:
Post a Comment