Below is the current code snippet:
HTML
<center><li ng-repeat = "x in items | orderBy: 'priority'">
<!-- color code priorities -->
<span ng-style="cmplt" ng-class="{ red: x.type == 'Work', blue: x.type == 'Personal' }">
<b>{{ x.name }}</b></span>
<span ng-class="{ yourChore: x.assignedTo == username} ">
- {{ x.type }} (Priority {{ x.priority }}) Assigned by {{ x.creator }} to {{ x.assignedTo }}
</span>
<!-- When task is completed, user can click this button to mark it as such -->
<button type="button" ng-click="cmplt={color: 'gray', 'text-decoration': 'line-through'} ;
markAs(this)">Completed</button>
<div ng-class="{ red: x.completed == true }"> Hello</div>
<button type="button" ng-click = "comment = true">Comment</button>
<div ng-show="comment"><textarea rows="3" columns="50" ng-model="x.comments"></textarea></div>
<div>{{ x.comments }}</div>
</li></center>
JavaScript
$scope.markAs = function(repeatScope){
if (!repeatScope.completed){
repeatScope.completed = true;
}
else {
repeatScope.completed = false;
}
};
The objects being repeated have a boolean value inside them that defaults to false. However, when the user clicks a button, it should change to true. The issue is that this does not occur as expected, and the value remains false. It's unclear why this is happening based on the provided code.