I am currently working on a ToDo-List exercise in JavaScript and have chosen to utilize AngularJS in order to enhance my skills.
Check out the Github repository here
In my initial attempt, I have set up two unordered lists - one for active items and another for completed items. Each item should feature its own delete button and checkbox to indicate whether it is active or complete.
While the delete button functions correctly, I encountered an issue when implementing the checkboxes. Whenever I mark an item as complete, it ends up deleting the description from the following item and renders the delete buttons inactive.
Since I am still learning Angular, I would greatly appreciate any advice on what I might be doing wrong.
<body ng-controller="ToDoListController as ctrl">
<h1>To Do List</h1>
<div>
<form class="form-horizontal">
<input ng-model="newItem" id="newItem" type="text" placeholder="What needs doing?">
<button ng-click="ctrl.addItem(newItem); newItem=''" class="btn" id="addNewItem">Add</button>
</form>
<ul class="list-group" ng-repeat="activeItem in ctrl.listActive track by $index">
<li>
<input type="checkbox" ng-click="ctrl.toggle(activeItem)" ng-model="checkBoxModel.completed">
{{activeItem}}
<button ng-click="ctrl.deleteItem(activeItem)" class="btn" id="deleteItem">Delete</button>
</li>
</ul>
<ul class="list-group" ng-repeat="completedItem in ctrl.listCompleted track by $index">
<li>
<input type="checkbox" ng-click="ctrl.toggle(completedItem)" ng-model="checkBoxModel.completed">
{{completedItem}}
<button ng-click="ctrl.deleteItem(completedItem)" class="btn" id="deleteItem">Delete</button>
</li>
</ul>
</div>
</body>
My JS controller:
toDoList.controller('ToDoListController', [function(){
this.listActive = [];
this.listCompleted = [];
var self = this;
self.addItem = function(item){
self.listActive.push(item);
};
self.isItemActive = function(item){
return self.listActive.indexOf(item) >= 0;
};
self.deleteItem = function(item){
if (self.isItemActive(item)) {
self.listActive.splice(item, 1);
} else {
self.listCompleted.splice(item, 1);
}
};
self.toggle = function(item){
if (self.isItemActive(item)) {
self.listCompleted.push(item);
self.listActive.splice(item, 1);
} else {
self.listActive.push(item);
self.listCompleted.splice(item, 1);
}
};
self.editItem = function(item, newItem){
// code for editing an item
};
self.totalTaskCount = function(){
return self.listActive.length + self.listCompleted.length;
};
self.activeTaskCount = function(){
return self.listActive.length;
};
self.completedTaskCount = function(){
return self.listCompleted.length;
};
self.clearCompleted = function(){
self.listCompleted = [];
};
}]);