My goal is to allow users to switch the class from incomplete to complete when they click a button and the function(response) returns 1. I have attempted to use ng-class, but it is not effective because the HTML elements are generated with a PHP loop. This means that an AngularJS expression cannot properly check the database to determine if the task is incomplete or complete.
I introduced the 'active' variable, but I am struggling to implement it without ng-class. Is there a different approach to adding or removing classes in jQuery? Or perhaps there is another solution that someone can suggest.
HTML:
<div class='task col-md-4 incomplete'>
<button data-ng-click='toggleTask(".$lesson_id.", 0)' class='btn btn-default'>Mark as complete</b></button>
</div>
AngularJS:
var app = angular.module('training-center', []);
app.controller('task-manager', function(\$scope, \$http) {
\$scope.toggleTask = function(id, active) {
\$scope.id = id;
\$http.post('app/modules/Controller.php?action=toggleTask', {
task_id: id,
active: active
}).
then(function(response) {
if (response.data == '1') {
//What should go here?
}
},
function(response) {
});
};
});