I am currently working on a ToDo application as a way to familiarize myself with Angular JS.
Within my application, there is an array named toDoList, where I store objects based on user inputs received from a modal window.
These items are then displayed on the user interface.
One of the properties in these objects is done, which is initially set to false.
My goal is to have a button that allows users to mark a task as completed. When this button is clicked, I want the value of done for the specific object in the toDoList array to toggle between true and false. It should only affect the individual object within the generated ng-repeat element, not all objects in the list.
The button responsible for this action is labeled as itemComplete.
I attempted to use a booleanVal toggle within the ng-click, but encountered errors in the console.
Index.html
<div class="row newItem" ng-show="toDoList.length > 0"
ng-repeat="item in toDoList">
<div class="col-2">
<button class="itemComplete btn"
ng-click="item.done.booleanVal = !item.done.booleanVal">
<i class="far fa-check-circle fa-2x"></i>
</button>
</div>
<div class="col-8">
<h4>{{item.project}}</h4>
<p>{{item.task}}.</p>
</div>
<div class="col-2">
<button class="btn deleteItem"
ng-click="deleteItem($index); getTaskCount()">
<i class="far fa-times-circle fa-2x"></i>
</button>
</div>
</div>
App.module.js
$scope.toDoList = [];
$scope.addNewToDoTask = function () {
$scope.toDoList.push({
project: $scope.projectInput,
task: $scope.taskInput,
done: false
});
$scope.projectInput = "";
$scope.taskInput = "";
};