Angular/Todolist
Jump to navigation
Jump to search
Version 2
index.html
<!doctype html>
<html lang="en" ng-app="todoApp">
<head>
<meta charset="utf-8">
<title>TODO LIST Angular App</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/app.css">
<script src="bower_components/angular/angular.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-controller="TodoListCtrl">
<h1>Todolist</h1>
<form>Todo: <input type="text"/></form>
<!-- Search: <input ng-model="query"> -->
<ul class="tasks">
<!-- <li ng-repeat="task in tasks | filter:query"> -->
<li ng-repeat="task in tasks">
<p>
<!-- <form><input type="checkbox"/>{{task.description}} ({{task.date}}).</form> -->
{{task.title}} ({{task.date}}).
</p>
</li>
</ul>
</body>
</html>
js/controllers.js
'use strict';
/* Controllers */
var todoApp = angular.module('todoApp', []);
todoApp.controller('TodoListCtrl', function($scope) {
$scope.tasks = [
{'date': '11/11/2015',
'title': 'Apprendre Angular.',
'completed': false
},
{'date': '12/11/2015',
'title': 'Faire le mini-projet.',
'completed': false
},
{'date': '12/11/2015',
'title': 'Faire le mini-projet.',
'completed': false
},
];
});
Version 3
<!doctype html>
<html lang="en" ng-app="todoApp">
<head>
<meta charset="utf-8">
<title>TODO LIST Angular App</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/app.css">
<script src="bower_components/angular/angular.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-controller="TodoListCtrl">
<h1>Todolist</h1>
<p>
Search: <input ng-model="query">
</p>
<form id="task-form" ng-submit="addTask()">
<input id="new-task" placeholder="What needs to be done?" ng-model="newTask" ng-disabled="saving" autofocus>
</form>
<ul id="task-list" class="tasks">
<li ng-repeat="task in tasks | filter:query">
<p>
<form><input type="checkbox"/><label>{{task.title}} ({{task.date}}).</label></form>
</p>
</li>
</ul>
</body>
</html>
'use strict';
/* Controllers */
var todoApp = angular.module('todoApp', []);
todoApp.controller('TodoListCtrl', function($scope) {
$scope.tasks = [];
$scope.addTask = function () {
var t = {
title: $scope.newTask.trim(),
date: Date.now(),
completed: false
};
/* if (!t.title) {
return;
}
*/
$scope.tasks.push(t);
$scope.newTask = '';
console.log(tasks);
};
});