Question

我在index.html中添加了一系列复选框控件。我想检查当用户点击提交按钮时是否选中了至少一个复选框。我尝试了下面的代码，但似乎没有用。

在index.html中：

    <form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="">  
      <div >
                          <label>Delivery Method</label>
                      </div>
                      <div ng-repeat="method in deliveryMethods">
                          <input type="checkbox" id="{{method.id}}"
                                 value="{{method.value}}" name="deliveryMethod[]" ng-model="method.selected"
                                 ng-click="toggleSelection(method.value)" ng-required="!someSelected">
                          {{method.value}}

                      </div>

                  </div>
                  <span style="color:red" ng-show="submitted == true &&  !someSelected">Delivery is required</span>         
<input type="submit" value="Submit" ng-click="submitted=true" />

在controller.js文件中，

$scope.deliveryMethods = [{
            "id": 1,
            "value": "Test-up",
            selected: true
        }, {
            "id": 2,
            "value": "Test Two",

            selected: false
        }, {
            "id": 3,
            "value": "Test Three",

            selected: false
        }];      

 $scope.toggleSelection = function toggleSelection(deliveryMethods) {       
        var idx = $scope.deliverySelection.indexOf(deliveryMethods);
                    if (idx > -1) {
            $scope.deliverySelection.splice(idx, 1);
        } else {
            $scope.deliverySelection.push(deliveryMethods);
        }
        someSelected();
    };
$scope.someSelected = true;
    function someSelected() {
        $scope.someSelected = false;
        for (var i = 0; i < $scope.deliveryMethods.lenght; i++) {
            if ($scope.deliveryMethods[i].selected == true) {
                $scope.someSelected = true;                   
                return false;
            }
        }
    }

我想检查，如果选中了至少一个复选框，则用户点击提交按钮。如果未选中任何复选框，则显示带有自定义消息的范围。如何解决这个问题？感谢

Answer 1

使用循环

尝试calculateSomeSelected

$scope.someSelected=false;
for (var i=0;i<$scope.deliveryMethods.lenght;i++)
{
   if($scope.deliveryMethods[i].selected == true)
   {
      $scope.someSelected=true;
      // show custom message here
      return false;
   }
}

更新

但没有显示错误消息。如何更新错误消息，如下所示复选框以显示错误

更新您的范围代码，如下所示

<span style="color:red" ng-show="submitted == true && !someSelected">Name is required</span>

还请在初始阶段和每个复选框点击事件中致电someSelected()。

Answer 2

您可以在提交按钮上使用ng-disabled或ng-if作为解决方法，并使用标记。这是一个工作Fiddle。

ng-复选框必需

2 个答案:

更新