Javascript Angularjs:确认已单击复选框

Javascript Angularjs:确认已单击复选框,javascript,angularjs,checkbox,Javascript,Angularjs,Checkbox,我在表单中有一个复选框。在提交表单之前,我想检查是否至少选中了一个复选框。如果没有,请禁用“提交”按钮。复选框列表是动态的。 我已尝试使用ng click=“check()” 问题是当单击一个复选框时,cb.fruit.Apple=true不会被反映出来。At$log.info(o)它表示未定义。 当选中两个复选框时(Apple=true,Grape=true),$log.info(o)仅显示一个值(Apple=true)。但不应该这样 有没有其他简单的方法来解决这个问题,或者我哪里出了问题?我

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

问题是当单击一个复选框时,
cb.fruit.Apple=true
不会被反映出来。At
$log.info(o)它表示
未定义
。 当选中两个复选框时(Apple=true,Grape=true)
$log.info(o)
仅显示一个值
(Apple=true)
。但不应该这样


有没有其他简单的方法来解决这个问题,或者我哪里出了问题?

我刚刚阅读了angular教程,但我觉得您在错误的位置调用check。您在单击复选框时调用它,而该值似乎还没有被选中。在提交之前,请调用您的检查方法(将其绑定到“提交”按钮单击或等效按钮。

请检查此提琴样本

控制器

HTML

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

{{heading}}
  • {{item.name}

首先,您可能需要创建一个数组对象并将其绑定到您的复选框ng模型,根据基本编程实践,您可以推断您不需要两个变量fruit\u false和fruit\u true,只有长度变量应该是ok,您可以在单击复选框(!o)时增加和减少该变量并不表示该值为false,因为对于数组,您总是会得到一些值,因此这将始终计算为true。

解决方案非常简单: (见相关文件)

  • 既然您提到“复选框列表是动态的”,并将其与您为每个复选框创建的模型相关联,那么第一步就是使用ng repeat指令迭代每个复选框项显示每个复选框标签并将其键用作模型的直接参考的语法
例如:


谢谢!!它很有魅力。我错过了“$scope.cb={fruits:{Apple:false,Grapes:false,Mango:false}};”现在很简单。如果这解决了你的问题,你可以选择这个作为公认的答案。嗨,你的sol工作得很好,但是Ryeball的ans更干净。谢谢。
$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;
}
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;
    }
}
<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>
<label ng-repeat="(fruitName, isChecked) in cb.fruits" for="{{fruitName}}">
  <input type="checkbox" ng-model="cb.fruits[fruitName]" id="{{fruitName}}" /> {{fruitName}}<br>
</label>
 <button type="submit" ng-disabled="!hasSelectedFruit()">Button</button>
  $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;
  };