AngularJS

Question

我正在构建一个 ToDo 应用程序来学习 Angular JS。

在我的应用程序中，我有一个名为 toDoList 的数组，我根据用户的一些输入将对象推入该数组，这是在模态的其他地方完成的。

该项目随后显示在 UI 上。

我有一个按钮，我想用它来显示任务已经完成。在对象中，其中一个属性是 done，这最初设置为 false。

单击按钮时，我希望 toDoList 数组中特定对象的值在 false 和 true 之间切换。因此，不要设置所有完成的对象属性只设置生成的 ng-repeat 元素上的特定对象。

我指的按钮是 itemComplete 按钮。

我曾尝试在 ng-click 上使用 booleanVal 开关，但这会在控制台中为我抛出错误。

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

Answer 1

尝试在 ng-click 表达式中用 item.done 替换 item.done.booleanVal。

Answer 2

错误信息：

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)

很明显：

<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>

布尔值是原始值。他们没有属性。

DEMO on PLNKR

AngularJS - 在按钮点击时切换对象值布尔值

AngularJS - Toggle object value boolean on button click

javascript

angularjs-ng-click