Question

我正在使用AngularJS指令列出复选框checklist-model，但我需要始终至少检查一个复选框。我通过添加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

这可能来自角度的异步性质和您正在使用的库。到目前为止我能找到的是一些像这样的虚拟解决方法（jsfiddle）：创建一个事件来跟踪输入点击并执行以下操作：

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

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

然后将其添加到您的元素

 ng-click="onclick($event)"

我不是说它很完美但它有效

Answer 2

我的一位同事建议在选中唯一的复选框后禁用该复选框，这样就可以防止更改模块（因此指令甚至不需要更改），并且用户了解他的用户体验更好无法取消选中：

     <input type="checkbox" checklist-model="user.roles" checklist-value="role.id" ng-disabled="shouldDisable(role.id)"> {{role.text}}

 $scope.shouldDisable = function(roleId) {
        var isDisabled = false;
        if($scope.user.roles.length === 1) {
            isDisabled = $scope.user.roles.indexOf(roleId) !== -1;
        }
        return isDisabled;
    }

请参阅this JSfiddle

中的回答

Answer 3

目前，该组件不支持此功能，但是有一个讨论来实现minlength / maxlength https://github.com/vitalets/checklist-model/issues/15，然后只需使用checklist-minlength=1即可实现。

我还修改了您的提案以实施checklistBeforeChange。我将在下一批中尝试处理这个问题。在v0.8.0中实现。

Answer 4

使用array.some函数对@ozba进行回答的更好版本：

public atLeastOneRowEnabled(row): boolean {
        //at least one row is visible except the current line
        return !this.rows.some(rowIterator => rowIterator.logical_name !== row.logical_name && rowIterator.isVisible);
    }

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

4 个答案: