Question

我在表单中有一个复选框。在提交表单之前，我想检查是否选中了至少一个复选框。如果没有，请禁用提交按钮。复选框列表是动态的。我尝试过ng-click =“check（）”

<label class="checkbox-inline">
<input type="checkbox" name='Apple' ng-model='cb.fruit.Apple' ng-click="check()"> Apple
</label>
<label class="checkbox-inline">
<input type="checkbox" name='Grape' ng-model='cb.fruit.Grape' ng-click="check()"> Grape
</label>
<label class="checkbox-inline">
<input type="checkbox" name='Mango' ng-model='cb.fruit.Mango' ng-click="check()"> Mango
</label>

Angularjs Controller内部，

$scope.check = function(){
fruit_false = 0;
fruit_true = 0;

for (var o in $scope.cb.fruit){
    $log.info(o);
    if (!o) fruit_false++;
    if (o) fruit_true++;
    $log.info(fruit_false);$log.info(fruit_true);

}
// this logic needs to be corrected
if (fruit_false == 0 && fruit_true == 0)
    $scope.cd.fruitcheck = false;
else
    $scope.cd.fruitcheck = true;
}

问题是，如果单击一个复选框，则不会反映cb.fruit.Apple=true。在$log.info(o);它显示undefiend。如果选中了两个复选框(Apple=true, Grape=true)，则$log.info(o);仅显示一个值(Apple= true)。但不应该这样发生。

有没有其他简单的方法可以解决这个问题或我出错的地方？

Answer 1

解决方案非常简单：（参见相关的PLUNKER DEMO）

由于您已经提到过，＆＃34;复选框列表是动态的＆＃34;，并将其与您为每个复选框创建的模型相关联，然后第一步是使用ng-迭代每个复选框项目重复指令。使用（键，值）语法显示每个复选框标签，并使用其键作为模型的直接参考。

E.G：

<label ng-repeat="(fruitName, isChecked) in cb.fruits" for="{{fruitName}}">
  <input type="checkbox" ng-model="cb.fruits[fruitName]" id="{{fruitName}}" /> {{fruitName}}<br>
</label>

创建一个函数以确定$ scope.cb.fruits对象中是否存在已检查的值。在ng-disabled指令中使用此功能可以禁用和启用提交按钮。

E.G：

<强> HTML

 <button type="submit" ng-disabled="!hasSelectedFruit()">Button</button>

<强> JAVASCRIPT

  $scope.cb = {
    fruits: {
      Apple: false,
      Grapes: false,
      Mango: false
    }
  };

  $scope.hasSelectedFruit = function() {
    var fruits = $scope.cb.fruits;
    for(var index in fruits)
      if(fruits[index])
        return true;
    return false;
  };

Answer 2

请查看这个小提琴样本。

<强> CONTROLLER

function SampleCtrl($scope){
    $scope.heading = 'Hello World';
    $scope.items = [{name:'Apple',checked:false},{name:'Orange',checked:false},{name:'Banana',checked:false}]
    $scope.ischeckedsomething = function(){
        var checkedcount = 0;
        angular.forEach($scope.items,function(item){
            checkedcount += item.checked ? 1 : 0;
        });
        return checkedcount == 0;
    }
}

<强> HTML

<div data-ng-app="">

    <div data-ng-controller="SampleCtrl">

        <span>{{heading}}</span>   
        <ul>
            <li data-ng-repeat="item in items">
                <label>
                    <input type="checkbox" data-ng-model="item.checked" /> {{item.name}}
                </label>
            </li>

        </ul>
        <input type="button" value="Button" data-ng-disabled="ischeckedsomething()" />
    </div>

</div>

Answer 3

我只是仔细阅读了角度教程，但在我看来，你在错误的地方打电话检查。您在单击复选框时调用它，似乎尚未选择该值。在进行提交之前调用您的检查方法（将其绑定到提交按钮单击或等效。

Answer 4

首先，您可能需要创建一个数组对象并将其绑定到您的复选框ng-model，从基本编程实践中可以推断出您不需要两个变量fruit_false和fruit_true，只有length变量应该没问题单击复选框可以增加和减少，语句（！o）并不表示该值为false，因为对于数组，您总是会得到一些值，因此总是会计算为true。

Angularjs：单击验证复选框

4 个答案: