How to change CSS in Controller

Question

I m trying to do a workaround for a bug. i need to just change the css of an element when an other checkbox is clicked. But it is not working.. It just works when i click on an other button somewhere else but when i click on the checkbox the view is not being refreshed maybe ? Any ideas ?

View:

<input
    type="checkbox"  
    value="application.callback" id="telefonBox"
    ng-click="application.callback = !application.callback; toggleClass(application.callback)"
/>

Controller:

$scope.toggleClass = function(newValue) {
    var element = angular.element(document.querySelector('#additional'));

    if (newValue) {
        element.toggleClass("tooltip-agent tooltip-agentChecked ");
    } else {
        element.toggleClass("tooltip-agentChecked tooltip-agent");
    }
    $scope.$apply();
}

i tried this to but not working

$scope.$watch('$scope.application.callback', function (newValue, oldValue) {
    var element = angular.element(document.querySelector('#additional'));
    if (newValue) {
        element.toggleClass("tooltip-agent tooltip-agentChecked ");
    } else {
        element.toggleClass("tooltip-agentChecked tooltip-agent ");
    }

add more code, esp the additional part

Satej S
– Satej S

2016-02-26 09:50:29 +00:00
Commented Feb 26, 2016 at 9:50 — Satej S
– Satej S, Commented Feb 26, 2016 at 9:50

Sanjay Nishad · Accepted Answer · 2016-02-26 10:23:08Z

1

add ng-modal into checkbox

<input type="checkbox" ng-model="application.callback">

and ng-class into your #additional element

<div id="additional" ng-class="{true:'tooltip-agent tooltip-agentChecked', false:'tooltip-agentChecked tooltip-agent'}[application.callback]"></div>

answered Feb 26, 2016 at 10:23

Sanjay Nishad

1,62515 silver badges29 bronze badges

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

Comments

Louie Almeda · Accepted Answer · 2016-02-26 09:48:42Z

1

DEMO

You should not manipulate elements in angular as much as possible, you can do it easier with ng-class like this

<div id="test" ng-class='{ active: vm.isChecked }'>
  lorem
</div>

ng-class accepts an object as parameter, in this case it's { active: vm.isChecked } which mean if vm.isChecked evaluates to true, the active class will be applied to the element

answered Feb 26, 2016 at 9:48

Louie Almeda

5,67035 silver badges41 bronze badges

Comments

Hadi · Accepted Answer · 2016-03-08 19:48:36Z

0

  $scope.selection = function($event) {
  var checkbox = $event.target;
  var action = (checkbox.checked ? 'check' : 'uncheck');
    if(action == "check")
       angular.element(document.querySelector('#additional')).addClass("tooltip-agent tooltip-agentChecked");
    else
       angular.element(document.querySelector('#additional')).addClass("tooltip-agentChecked tooltip-agen");
};
  });


  <input type="checkbox" id="additional" ng-model="check" ng-click="selection($event)"  >

edited Mar 8, 2016 at 19:48

answered Feb 26, 2016 at 10:53

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

Collectives™ on Stack Overflow

How to change CSS in Controller

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related