AngularJS - 單擊按鈕時切換對象值布爾值

Question

我正在構建一個 ToDo 應用程序來學習 Angular JS。

在我的應用程序中，我有一個名為toDoList的數組，我根據用戶的一些輸入將對象推toDoList該數組中，這是在模態中的其他地方完成的。

然后該項目顯示在 UI 上。

我有一個按鈕，我想用它來顯示任務已完成。 在對象中的屬性之一已done ，這最初設置為false 。

單擊按鈕時，我希望該值在toDoList數組中的特定對象的false和true之間切換。 所以不要只設置生成的ng-repeat元素上的特定對象的所有對象 done 屬性。

我所指的按鈕是itemComplete按鈕。

我曾嘗試在ng-click上使用booleanVal切換，但這在控制台中為我拋出錯誤。

索引.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>

應用模塊.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

錯誤信息：

類型錯誤：無法在布爾值“false”上創建屬性“booleanVal”

 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>

布爾值是基元。 他們沒有屬性。

PLNKR 上的演示