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?

anoop · Accepted Answer · 2017-05-03 14:42:49Z

3

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
    }

answered May 3, 2017 at 14:42

anoop

3,8222 gold badges18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bartek Fryzowicz · Accepted Answer · 2017-05-03 14:43:15Z

1

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}"

answered May 3, 2017 at 14:43

Bartek Fryzowicz

6,70420 silver badges29 bronze badges

Comments

known-as-bmf · Accepted Answer · 2017-05-03 14:43:31Z

1

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

answered May 3, 2017 at 14:43

known-as-bmf

1,2229 silver badges9 bronze badges

Comments

Prabhu · Accepted Answer · 2017-05-03 14:43:48Z

1

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

answered May 3, 2017 at 14:43

Prabhu

4041 gold badge9 silver badges26 bronze badges

Comments

Paurian · Accepted Answer · 2017-05-03 14:39:56Z

0

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'}"

answered May 3, 2017 at 14:39

Paurian

1,41211 silver badges18 bronze badges

Collectives™ on Stack Overflow

toggle angular css class

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related