Add/Remove class if checkbox is checked/unchecked (AngularJS)

Question

I need to toggle a class if a checkbox is checked/unchecked with AngularJS. My Code is working on Plunker but in my controller there is no functionality.

Here is the Plunker: Click!

My Controller looks like this:

angular.module('inspinia')
.controller('MainController', function ($location, $scope, $state) {

  // initialize iCheck
  angular.element('.i-checks').iCheck({
    checkboxClass: 'icheckbox_square-green',
    radioClass: 'iradio_square-green'
  });

  //Checkbox functionality
  $scope.isChecked = function() {
      if ($scope.checked) {
        return false;
      }else{
        return true;
      }
  };

});

HTML

          <div class="panel panel-default confirm-panel accept-terminplanung">
            <div class="panel-body text-muted ibox-heading">
              <form action="#" method="post" role="form">
                <div class="i-checks" iCheck>
                  <label class="">
                    <div class="icheckbox_square-green">
                      <input type="checkbox" class="i-checks" ng-model="checked">
                    </div>
                      <p class="no-margins">Hiermit  akzeptiere ich  die Bedingungen des geschlossenen Dozentenvertrages und nehme den Bildungsauftrag für die ausgewählten Ausbildungen verbindlich an.</p>
                  </label>
                </div>
                <button type="button" name="termin-bestaetigen" class="btn btn-w-m btn-warning submit-appointment disabled" ng-class="{disabled: isChecked()}">Terminplanung übernehmen</button>
              </form>
            </div>
          </div>

What am I doing wrong?

@HorstJahns Yup, the Punkr is working fine, but it doesn't work inside my controller. That was the question.. — Codehan25
– Codehan25, Commented Feb 3, 2017 at 14:56
@HorstJahns ..no its not. I'm using a test controller in plunkr. My Controller looks like this: .controller('MainController', function ($location, $scope, $state){...}); — Codehan25
– Codehan25, Commented Feb 3, 2017 at 15:01
so how should we tell you why it does not work in your controller, if you do not show your controller? — oshell
– oshell, Commented Feb 3, 2017 at 15:01

Ihor Korotenko · Accepted Answer · 2017-02-03 15:42:37Z

1

As I can understand from the provided piece of code iCheck is something that is not working in angular scope, like JQuery. So every time your value inside this component changes you need to trigger a $digest cycle with a use of $scope.$digest() or $scope.$apply().

In iCheck documentation you can find callbacks section, so you can subscribe to that event and do $scope.$apply() in it. For example, inside your controller:

<your-iCheck-element>.on('ifChecked', function(event){
  $scope.$apply();
});

edited Feb 3, 2017 at 15:42

answered Feb 3, 2017 at 15:11

Ihor Korotenko

9061 gold badge13 silver badges31 bronze badges

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

1 Comment

Codehan25 Over a year ago

..youre right. Without the iCheck-Plugin the code is working. But how can I trigger a $digest? I never did that before..

oshell · Accepted Answer · 2017-02-03 14:56:45Z

0

Your function is basically doing nothing, but giving back the opposite value of checked. You can simply use negation of your model.

ng-class="{disabled: !checked}"

answered Feb 3, 2017 at 14:56

oshell

9,1411 gold badge31 silver badges50 bronze badges

1 Comment

Codehan25 Over a year ago

..nope, it doesnt change anything :(

Collectives™ on Stack Overflow

Add/Remove class if checkbox is checked/unchecked (AngularJS)

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related