AngularJS – Toggle object value boolean on button click

Issue

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 = "";
};

Solution

Try to replace item.done.booleanVal with item.done in ng-click expression.

Answered By – Vallerious

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.