AngularJS - Toggle object value boolean on button click

Question

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

One of the keys to debugging a problem it to examine error messages and their stack traces. We can't help with an error message if the question does not include any error messages. Double-check that your example reproduces the problem! If you inadvertently fixed the problem while composing the example but didn't test it again, you'd want to know that before asking someone else to help. — georgeawg
– georgeawg, Commented Feb 28, 2020 at 23:16

Vallerious · Accepted Answer · 2020-02-28 23:18:24Z

1

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

answered Feb 28, 2020 at 23:18

Vallerious

6408 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

georgeawg · Accepted Answer · 2020-02-28 23:34:01Z

The Error Message:

TypeError: Cannot create property 'booleanVal' on boolean 'false'

at fn (eval at compile (VM335 angular.js:16421), <anonymous>:4:461)
at callback (VM335 angular.js:28954)
at ChildScope.$eval (VM335 angular.js:19396)
at ChildScope.$apply (VM335 angular.js:19495)
at HTMLButtonElement.<anonymous> (VM335 angular.js:28958)
at defaultHandlerWrapper (VM335 angular.js:3826)
at HTMLButtonElement.eventHandler (VM335 angular.js:3814)

Pretty obvious:

<button class="itemComplete btn"
        ̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶i̶t̶e̶m̶.̶d̶o̶n̶e̶.̶b̶o̶o̶l̶e̶a̶n̶V̶a̶l̶ ̶=̶ ̶!̶i̶t̶e̶m̶.̶d̶o̶n̶e̶.̶b̶o̶o̶l̶e̶a̶n̶V̶a̶l̶"̶>̶
        ng-click="item.done = !item.done">
  <i class="far fa-check-circle fa-2x"></i>
</button>

Boolean values are primitives. They don't have properties.

The DEMO on PLNKR

Collectives™ on Stack Overflow

AngularJS - Toggle object value boolean on button click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related