AngularJS changing class without ng-class

Question

I'm looking to enable users to change the class from incomplete to complete on button click when function(response) returns 1. I have tried using issues, however; It doesn't work well as the HTML elements are loaded with a PHP loop so an ng-class expression doesn't work. This is because an if statement is run checking if it is incomplete or complete while the AngularJS expression wouldn't be able to check the database in this sense.

I added the 'active' variable, but I cant seem to put this into play without ng-class. Is there an alternative to jQuery's class add/remove? Or can someone think of another solution.

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 do I place here?
        }
      },
      function(response) {

      });
  };
});

This makes no sense: "It doesn't work well as the HTML elements are loaded with a PHP loop so an ng-class expression doesn't work". Any PHP functionality (server) occurs prior to any angular functionality (client). — Stafford Williams
– Stafford Williams, Commented Sep 9, 2015 at 0:44
Sorry, what i meant is the classes are loaded prior to the page-load, and there are multiple, some tasks are complete and others are incomplete @StaffordWilliams — Oliver Kucharzewski
– Oliver Kucharzewski, Commented Sep 9, 2015 at 0:52
If you don't want to change the PHP from pre-rendering classes, maybe you want something like this: stackoverflow.com/a/20888523/469777 — Stafford Williams
– Stafford Williams, Commented Sep 9, 2015 at 0:55

Mario Mucalo · Accepted Answer · 2015-09-09 00:06:51Z

You do not have to use ng-class - you can use regular class and put a parameter in it with {{}}. Then just change the variable in the $scope, and it will automatically adapt its behaviour.

Here is an example:

<div ng-app>
<div ng-controller="testCtrl">
    <div id="test" class="{{className}}">
        {{className}}
    </div>
    <a href="#" ng-click="increase();">Click</a>
</div>
</div>

And the controller code (it's ugly, but you'll get the point):

function testCtrl($scope) {
    $scope.className = "red";

    $scope.increase = function() {
        if($scope.className == "red")
            $scope.className = "blue";
        else if($scope.className == "blue")
            $scope.className = "green";
        else if($scope.className == "green")
            $scope.className = "red";
    }
}

(Of course, classes are trivial):

.red {    color: #FF0000; }
.blue {    color: #0000FF;}
.green {    color: #00FF00;}

This works just fine for me. I have not tested it out in an environment where the body of the page is generated by PHP, but should not make a difference.

Collectives™ on Stack Overflow

AngularJS changing class without ng-class

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related