javascript - AngularJS 中的一个复选框检查了验证

Question

我在 Angular 中遇到了复选框的问题。由于后端的工作方式，所有复选框都必须有不同的名称，但至少必须选中其中一个复选框才能提交表单。

所以我创建了一个简单的指令来做到这一点:

{
  restrict: 'A',
  require: ['ngModel', '^form'],
  link: function(scope, el, attrs, controllers) {
    var ngModel = controllers[0];
    var formController = controllers[1];

    scope[attrs.validateOneSelected] =
      scope[attrs.validateOneSelected] || 0;

    ngModel.$validators.oneSelected = function(modelValue, viewValue) {
      if (!viewValue && scope[attrs.validateOneSelected] > 0) {
        scope[attrs.validateOneSelected]--;
      }
      else if (viewValue) {
        scope[attrs.validateOneSelected]++;
      }  

      return scope[attrs.validateOneSelected] > 0;
    };
  }
}

这基本上是一个计数器，每当检查一个时，数字就会增加，当未检查时，它就会减少，并且只要检查了多个就有效。

好东西。

但是，由于验证器仅在模型值更改时才会触发，因此我仍然将其他验证器标记为无效。

鉴于验证器的性质，我能看到解决此问题的唯一解决方案是放置一个在验证完成后运行的 setTimeout ，迭代每个 $errors.oneSelected 并调用 $validate 但这对我来说看起来很麻烦，我认为我可能会丢失一些东西，也许，这可以用更简单的方法来解决。

编辑

Plunker玩它

Answer 1

我写下了这个对你的问题的巧妙回答。

TL；DR:Plunker

它没有使用您的代码，因为我在您的骗子之前编写了它，但请仔细观察。

考虑到您了解闭包，请查看以下代码:

Angular |JS:

app.controller('MainCtrl', function($scope) {

    var counter = (function(){
    var counterVal = 0;
    return function(checked){
      if(checked === true){
        counterVal++;
        return counterVal;
      }else{
        counterVal--;
        return counterVal;
      }
    }
  })()


  $scope.eval = function(checked){
     $scope.valid = counter(checked);
  }
});

HTML:

<form>
  <input name="first_checkbox" type="checkbox" value="1st" ng-model="st" ng-change="eval(st)"/>
  first
       <input name="second_checkbox" type="checkbox" value="2nd" ng-model="nd" ng-change="eval(nd)"/>
  second
       <input name="third_checkbox" type="checkbox" value="3rd" ng-model="rd" ng-change="eval(rd)"/>
  third
       <input name="forth_checkbox" type="checkbox" value="4th" ng-model="th" ng-change="eval(th)"/>
  forth


  {{counter}}
  <button ng-disabled="!valid">Validate</button>
</form>

说明:mozilla 关闭:

Closures are functions that refer to independent (free) variables.

In other words, the function defined in the closure 'remembers' the environment in which it was created.

By me : A function that remembers where and how it was created.

我们在这里做的是三件事:

第一:

创建一个闭包，内部有一个私有(private)变量 - counter，闭包返回一个函数，该函数接收 true 或 false、修改私有(private)变量并返回计数器的值。

第二:

我们创建一个将在每个复选框元素上使用的函数，该函数将传递复选框的当前值 true 或 false，并将计数器传递给valid 是 $scope 上的变量。

第三:

我们根据$scope.valid禁用该按钮。

您还可以通过控制台记录该值，以查看计数器的增长情况取决于您选中的复选框的数量。

希望这有帮助!林尼尔。