【问题标题】:angularjs checkbox validation at least twoangularjs复选框验证至少两个
【发布时间】: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);
    });

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

【问题讨论】:

    标签: javascript jquery angularjs validation checkbox


    【解决方案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);
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-07-27
      • 2011-03-13
      • 2015-11-06
      • 1970-01-01
      • 2014-07-15
      • 1970-01-01
      • 1970-01-01
      • 2018-10-03
      相关资源
      最近更新 更多