I'm building a ToDo application to learn Angular JS.
In my app I have an array called toDoList
, that I push objects into based on some inputs from the user, this is done elsewhere in a modal.
That item then displays on the UI.
I have a button, which I want to use to show the task has been completed. In the objects one of the properties is done
, this is initially set to false
.
When the button is clicked, I want the value to toggle between false
and true
for that specific object in the toDoList
array. So not to set all of the objects done property only the specific object on the generated ng-repeat
element.
The button I'm referring to is the itemComplete
button.
I have tried using booleanVal
toggle on the ng-click
, but this is throwing errors for me 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 = "";
};
Try to replace item.done.booleanVal
with item.done
in ng-click
expression.