angularjs复选框验证至少两个

Posted 2023-05-09

【中文标题】angularjs复选框验证至少两个

【英文标题】：angularjs checkbox validation at least two

【发布时间】：2016-09-11 17:03:48

【问题描述】：

使用 AngularJS，我想建立一个验证规则，其中必须至少选中 2 个复选框才能将输入视为有效。我试过这个：

<div ng-repeat="item in items">
                            <label><input type="checkbox" ng-model="checked[item.id]" ng-required="!isChecked" />
                            <span>item.title</span></label>
                          </div>

和

// checkbox validation
    angular.module('app', []).

    run(function($rootScope) 
        $rootScope.items = [
             id: 1, title: 'Certified Plumber' ,
             id: 2, title: 'Carpentry Experience' ,
             id: 3, title: 'Certified Electrician' ,
             id: 4, title: 'Bartending Experience' ,
             id: 5, title: 'Food Hygiene Certificate' ,
             id: 6, title: 'First Aid Course' ,
             id: 7, title: 'Forklift Drive Certificate' ,
             id: 8, title: "Driver's License (Type B)" 
        ];
        $rootScope.checked = ;
        $rootScope.isChecked = false;
        $rootScope.$watch('checked', function(selected) 
            $rootScope.isChecked = false;
            angular.forEach(selected, function(isChecked) 
                if (isChecked) $rootScope.isChecked = true;
            );
        , true);
    );

现在，当至少一个复选框被选中时，验证正在工作。如何为至少两个复选框自定义它？

【参考方案1】：

怎么样：

$rootScope.isChecked = false;
    $rootScope.$watch('checked', function(selected) 
        $rootScope.isChecked = false;
        $rootScope.checkedCounter = 0;
        angular.forEach(selected, function(isChecked) 
            if (isChecked) $rootScope.checkedCounter = $rootScope.checkedCounter + 1;
            if($rootScope.checkedCounter >= 2) $rootScope.isChecked = true;
        );
    , true);