Here is a simple TODO app created using angularjs.
The functionality is working well, but I am facing an issue where angularjs calls the 'remaining' function on every keystroke in the input field!! Can you spot any errors in the code below?
<!doctype html>
<html ng-app>
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div>
<h2>TODO:</h2>
<div ng-controller="TodoCtrl">
<span>{{remaining()}} of {{todos.length}} remaining</span> [ <a href="" ng-click="archive()">archive</a> ]
<ul class="list-unstyled">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done" >
<span>{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="todo" placeholder="Enter your task here">
<form>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<!--script src="app.js"></script-->
<script>
function TodoCtrl($scope) {
$scope.todos = [
{text: 'learn angular', done:true},
{text: 'build an angular app', done:false}
];
$scope.remaining = function() {
console.log('calling remaining()');
var count = 0;
angular.forEach($scope.todos, function(todo) {
count += todo.done? 0:1;
});
return count;
};
$scope.addTodo = function() {
if($scope.todo) {
$scope.todos.push({text: $scope.todo, done:false});
}
$scope.todo = '';
};
}
</script>
</body>
</html>