toggle angular css class

Question

I am trying an toggle the class 'not-compatible':false to 'not-compatible':true using angularjs:

    <div class="col status" style="margin-left: 63px;margin-right: 74px; width: 190px">
        <label class="title">Radius</label>
        <img src="assets/images/BOTTOM SCREEN/OPERATION BOARD/SVG/button UP enable.svg" ng-click="myFunctionUp()/>
        <div id="myDiv" class="status-bar" ng-class="{'not-compatible':false,'in-progress':false} ">
            <label class="number-spolier">1000<span>m</span> </label>
            <span><span></span></span>
        </div>
        <img src="assets/images/BOTTOM SCREEN/OPERATION BOARD/SVG/button DOWN enable.svg" ng-click="myFunctionDown()/>
    </div>

when the img(either first or second) is clicked to change the class to true of the div "myDiv".

Any idea?

Answer 1

It should be like, In HTML:

<div class="col status" style="margin-left: 63px;margin-right: 74px; width: 190px">
        <label class="title">Radius</label>
        <img src="assets/images/BOTTOM SCREEN/OPERATION BOARD/SVG/button UP enable.svg" ng-click="myFunctionUp()/>
        <div id="myDiv" class="status-bar" ng-class="{'not-compatible':isCompatible,'in-progress':false} ">
            <label class="number-spolier">1000<span>m</span> </label>
            <span><span></span></span>
        </div>
        <img src="assets/images/BOTTOM SCREEN/OPERATION BOARD/SVG/button DOWN enable.svg" ng-click="myFunctionDown()/>
    </div>

In controller:

    $scope.isCompatible = false;
    $scope.myFunctionDown = function(){
      $scope.isCompatible = true;
      //$scope.isCompatible = !$scope.isCompatible; //Or toggle like this
    }

Answer 2

You should set flag on your scope indicating if image has been clicked. You can add this line of code to myFunctionUp and myFunctionDown functions to set scope variable indicating that img has been clicked:

$scope.imgClicked = true;

and then just use this variable in ng-class like that:

ng-class="{'not-compatible': imgClicked}"

Answer 3

You can simply use a scope variable instead of false in your expression

{'not-compatible':false,'in-progress':false}

See https://plnkr.co/edit/ekIrDxH9DswG3UJzRiVT?p=preview

Answer 4

Try this example might help, actually you need to use the variable instead of directly setting true/false in ng-class

https://scotch.io/tutorials/the-many-ways-to-use-ngclass
http://codepen.io/sevilayha/pen/qlLED

Answer 5

ng-class should not have "false", but should have the name of the model's variable. For example, if MyFunctionDown() sets "classStatus = 'Fred'" then you could have something like ng-class="{'not-fred':classStatus !== 'Fred', 'is-fred':classStatus === 'Fred'}"