/* ------------------------------------------------------- * Filename: ToDo list * Website: http://www.shanidkv.com * Description: Shanidkv AngularJS blog * Author: Muhammed Shanid [email protected] ---------------------------------------------------------*/ function TodoCtrl($scope) { $scope.todos = [ {text:'HTML5', status:true}, {text:'CSS3', status:false}]; $scope.addTodo = function() { $scope.todos.push({text:$scope.todoText, status:false}); $scope.todoText = ''; }; $scope.remaining = function() { var count = 0; angular.forEach($scope.todos, function(todo) { count += todo.status ? 0 : 1; }); return count; }; $scope.archive = function() { var oldTodos = $scope.todos; $scope.todos = []; angular.forEach(oldTodos, function(todo) { if (!todo.status) $scope.todos.push(todo); }); }; }
<div class="todo-list" ng-app> <h2>Todo App</h2> <div ng-controller="TodoCtrl"> <span>{{remaining()}} of {{todos.length}} remaining</span> [ <a href="" ng-click="archive()">archive</a> ] <ul class="task"> <li ng-repeat="todo in todos"> <input type="checkbox" ng-model="todo.status"> <span class="status-{{todo.status}}">{{todo.text}}</span> </li> </ul> <form ng-submit="addTodo()"> <input type="text" required ng-model="todoText" placeholder="add new todo here"> <input class="btn-primary" type="submit" value="Add new task"> </form> </div> </div>
.todo-list{ padding:20px; font-family: Arial; font-size:14px; color: #666; } .status-true { text-decoration: line-through; color: grey; } ul{ position: relative; width: 260px; margin: 20px 0; padding:0; background: #FFF; border: 1px solid; border-color: #DFDCDC #D9D6D6 #CCC; border-radius: 2px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } ul li{ position: relative; padding: 7px 15px; margin: 0; line-height: 21px; font-size: 12px; color: #8B8F97; list-style: none; border-bottom: 1px solid #E6EBED; } ul li:last{ border:0; } input{ padding: 5px; } input[type='text']{ color: #333; }