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

你的功能基本上什么也没做，但是给了相反的值。您可以简单地使用否定模型。

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

如果选中/取消选中复选框，则添加/删除类（AngularJS）

2 个答案: