As I delve into AngularJs and Firebase, I am working on a todo list application.
In my application, there is an HTML form structured like this:
<form name="frm" ng-submit="addTodo()" id="form-border">
<div class="form-inline">
<input type="text" class="form-control" name="newtodo" ng-model="newtodo" required="" id="inputform" />
<button class="btn btn-success" ng-disabled="frm.$invalid">Go</button>
<button class="btn btn-danger" ng-click="clearCompleted(todo)">Clear Completed</button>
</div> <!-- end form group -->
</form>
Below the form are the actual tasks labeled as "todos" in an unordered list format, added through the form above.
Here's an example of the code:
<li ng-repeat="todo in todos" ng-mouseenter="hover = true" ng-mouseleave="hover = false" class="list-group-item" ng-class="inactive" >
<input type="checkbox" ng-model="todo.done" ng-click="clickDone(todo)"/>
<span ng-class="{'done':todo.done}" id="donetask">{{todo.title}}</span><!-- add line-through when task is done-->
<ng-include ng-class="{'hiRank-off': !hover}" src="'rankbutton.html'"></ng-include><!-- ng-include rankbutton-->
</li>
The data in my app.js is stored with Firebase:
var myData = new Firebase("https://firebaseio-demo.com/ToDos");
and
$scope.todos.$add({'title':$scope.newtodo,'done':false, 'timetag': datecreated}); //push to Array
$scope.newtodo = '';
To mark my tasks completed using clickDone(todo), I access the variable 'todo' from my ng-repeat as follows:
$scope.clickDone = function(todo){
$scope.todos.$save(todo); //saves todo state when checked
};
I'm facing a challenge with deleting objects using ng-click="clearCompleted(todo)", which aims to remove items marked as complete. This functionality is mentioned in the first code block However, it seems that clearCompleted()function is not within the ng-repeat="todo in todos" scope, causing difficulties in deleting objects with this function.
I attempted to delete without success, resulting in errors such as:
TypeError: Cannot read property 'done' of undefined
$scope.clearCompleted = function($scope.todos){
$scope.todos.$remove($scope.todo.done);
};