javascript - 禁止取消选中 angularJS 中的所有复选框

Question

我正在为复选框列表使用 AngularJS 指令 checklist-model但我需要始终选中至少一个复选框。我已经更改了 checklist-model.js通过添加一个 if:

watch if(current.length > 1)

在删除支票之前:

scope.$watch(attrs.ngModel, function(newValue, oldValue) {
  if (newValue === oldValue) { 
    return;
  } 
  var current = getter(scope.$parent);
  if (angular.isFunction(setter)) {
    if (newValue === true) {
      setter(scope.$parent, add(current, value, comparator));
    } else {
        if(current.length > 1)
        {
            setter(scope.$parent, remove(current, value, comparator));
        }
    }
  }

  if (checklistChange) {
    checklistChange(scope);
  }
});

问题是 UI 已经变为未选中状态，而模型没有改变。

关于如何将复选框更改回“选中”状态，或者甚至更好地在它更改为选中之前捕获它，任何人都有一个优雅的建议(最好没有 JQuery)？

JSfiddle here ，尝试取消选中所有复选框并查看当复选框全部取消选中时(我试图阻止的)模型保持不为空(这很好但还不够)

Answer 1

这可能来自 Angular 的异步特性和您正在使用的库。到目前为止我能找到的是像这样的一些肮脏的解决方法(jsfiddle):创建一个事件，您可以在其中跟踪输入的点击并执行以下操作:

  $scope.onclick = function(evt) {
    if ($scope.user.roles.length === 1 && prevLength === 1) {
      evt.preventDefault();
    }

    prevLength = $scope.user.roles.length;
  };

然后把它添加到你的元素中

 ng-click="onclick($event)"

我不说它是完美的，但它确实有效