Add/Remove class 如果复选框是 checked/unchecked (AngularJS)

Question

如果复选框是 checked/unchecked 和 AngularJS，我需要切换 class。我的代码在 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

你的函数基本上什么都不做，只是返回相反的检查值。您可以简单地使用模型的否定。

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

Answer 2

正如我从所提供的代码片段中了解到的那样，iCheck 无法在 angular 范围内工作，例如 JQuery。因此，每次此组件中的值发生变化时，您都需要使用 $scope.$digest() 或 $scope.$apply().

触发 $digest 循环

在 iCheck 文档中，您可以找到回调部分，因此您可以订阅该事件并在其中执行 $scope.$apply()。例如，在您的控制器内：

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

Add/Remove class 如果复选框是 checked/unchecked (AngularJS)

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

checkbox

input

angularjs

angularjs-scope

angular-ngmodel