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并调用{{1但这对我来说看起来很麻烦，以为我可能会遗漏一些东西，也许这可以通过更简单的方式解决。

修改

Plunker玩它

Answer 1

我写下了这个问题的巧妙答案。

TL; DR：Plunker

它没有使用你的代码，因为我是在你的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：

闭包是指独立（自由）变量的函数。

换句话说，闭包中定义的函数'记住'了   它创建的环境。

由我：一个记住创建地点和方式的函数。

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

<强>首先

创建一个带有私有变量的闭包 - counter -inside，闭包返回一个接收true或false的函数，修改私有变量，并返回计数器的值。

<强>第二

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

<强>第三

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

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

希望这有帮助！ Linial

一个复选框在AngularJS中检查了验证

修改

1 个答案: