Добавить/удалить класс, если флажок установлен/снят флажок (AngularJS)

Question

Мне нужно переключить класс, если флажок установлен или не установлен с помощью AngularJS. Мой код работает над Plunker, но в моем контроллере нет функциональности.

Вот Plunker: Click!

Мой контроллер выглядит следующим образом:

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> 

Что я делаю неправильно?

Answer 1

Как я могу понять из предоставленного кусок кода iCheck является то, что не работает в angular объеме, как JQuery. Поэтому каждый раз, когда ваше значение внутри этого компонента изменяется, вам необходимо запустить цикл $digest с использованием $scope.$digest() или $scope.$apply().

В документации iCheck вы можете найти раздел обратных вызовов, чтобы подписаться на это событие и сделать в нем $scope.$apply(). Например, внутри вашего контроллера:

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

Answer 2

Ваша функция в основном ничего не делает, но возвращает противоположное значение checked. Вы можете просто использовать отрицание своей модели.

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