使用复选框并且需要 AngularJS

Posted 2023-02-22

【中文标题】使用复选框并且需要 AngularJS

【英文标题】：Using checkboxes and required with AngularJS

【发布时间】：2012-11-14 01:41:46

【问题描述】：

我尝试为我的复选框组使用 html5 required 属性，但我没有找到使用 ng-form 实现它的好方法。

当一个复选框被选中时，我希望将该输入元素的值推送到一个值数组中。

angular required 验证器似乎在监视与输入元素关联的 ng-model，但是如何将多个复选框链接到同一个模型并使用输入字段的值更新它的值？

目前的实现类似于this fiddle。

<div ng-controller="myCtrl">
  <ng-form name="myForm">
    <span ng-repeat="choice in choices">
      <label class="checkbox" for="choice.id">
        <input type="checkbox" required="required" value="choice.id" ng-click="updateQuestionValue(choice)" ng-model="choice.checked" name="group-one" id="choice.id" />
        choice.label
      </label>
    </span>
    <input type="submit" value="Send" ng-click="submitSurvey(survey)" ng-disabled="myForm.$invalid" />
  </ng-form>
</div>​

updateQuestionValue 函数处理值数组的添加或删除，但每个复选框都有自己的模型，这就是为什么需要检查每个复选框以使表单有效的原因。

我已经让它在一组单选按钮上工作，但它们都在同一个模型上工作，因为只能选择一个。

【问题讨论】：

我使用 Angular v1.2.1 将头撞在墙上一个小时，直到在 1.2.10 上尝试。现在好像修好了。

【参考方案1】：

如果您希望在未选择任何选项的情况下禁用提交按钮，最简单的方法是检查 ng-disabled 属性中数组的长度，而不设置所需的属性

<input type="submit" value="Send" ng-click="submitSurvey(survey)" 
 ng-disabled="value.length==0" />

See here for updated fiddle

另一种方法是检查复选框的 ng-required 属性中的数组长度

<input type="checkbox" value="choice.id" ng-click="updateQuestionValue(choice)"
  ng-model="choice.checked" name="group-one" id="choice.id" 
  ng-required="value.length==0" />

Second fiddle

【讨论】：

谢谢！我现在用你的第二个解决方案来解决这个问题。

ng-required 解决方案很容易实现，谢谢！

【参考方案2】：

一些事情：

在这种情况下，我会采用一种只更新整个数组的方法，因为它会稍微简化代码。 （如果您正在对 $scope.value 数组内容进行任何有状态的操作，您可能不想这样做，但它看起来不像您那样）。 您可以只使用<form> 而不是<ng-form>。 将提交功能从按钮的ng-click 移到表单的ng-submit 中。使用 Angular 的内置验证（如果您关心的话），这使验证管理变得更加容易 如果您的<label> 包装了您的<input>，则您不需要for="" 属性。

Here is an updated fiddle for you

这是代码：

<div ng-controller="myCtrl">
    <form name="myForm" ng-submit="submitSurvey(survey)">
        <span ng-repeat="choice in choices">
            <label class="checkbox">
            <input type="checkbox" required="required" value="choice.id" ng-change="updateQuestionValues()" ng-model="choice.checked" name="group-one" />
                choice.label
            </label>
        </span>
        <input type="submit" value="Send" ng-disabled="myForm.$invalid" />
    </form>
    value
</div>​

JS

function myCtrl($scope) 

    $scope.choices = [
        "id": 1,
        "value": "1",
        "label": "Good",
    
        "id": 2,
        "value": "2",
        "label": "Ok",
    
        "id": 3,
        "value": "3",
        "label": "Bad"];

    $scope.value = [];

    $scope.updateQuestionValues = function() 
        $scope.value = _.filter($scope.choices, function(c) 
            return c.checked;
        );
    ;
​

【讨论】：

嗨！感谢您的想法，我将重构我的最终实现。但我不明白这如何帮助我解决最初的问题？我仍然需要在myForm.$invalid == false

之前检查所有三个复选框

【参考方案3】：

我刚刚使用 ng-model 添加了一个隐藏输入，与单选按钮的 ng-model 相同：

 <div class="radio" ng-repeat="option in item.AnswerChoices | orderBy: DisplayOrder">
        <input type="radio" ng-model="item.Answer" name="mulchoice" value="option.DisplayName" />
        <span>option.DisplayName</span>
    <input type="hidden" ng-model="item.Answer" name="hiddenradiobuttoninput" required/>
 </div>

【讨论】：

这是一个很好的解决方案！我通过在复选框上使用ng-true-value="'I Agree'" ng-false-value="" 对其进行了一些改进。这样，如果他们选中然后取消选中，表单将恢复为无效。 （不加这个，用户可以勾选，然后取消勾选，隐藏的值变成“false”，这在技术上是必需隐藏字段的有效值。）

哎呀刚刚意识到您的答案是使用radio 而不是checkbox。我的改进只对checkbox有效

【参考方案4】：

为什么不让你的复选框为数组建模

<input type="checkbox" ng-model="value[$index]" value="choice.id/>

小提琴：http://jsfiddle.net/thbkA/1/

【讨论】：

谢谢，这是一个很好的解决方案，但它仍然无法解决我最初的问题，为了使 Angular 将我的表单标记为有效，我需要选中所有三个复选框。

@Tryggve，看看这个问题：***.com/questions/16289248/…

【参考方案5】：

<ul  class="list-group">
  <li ng-repeat='animal in animals' class="list-group-item">
    <label>
      <input type="checkbox"
        ng-model="xyx"
        ng-click="toggleAnimal(animal)"
        ng-checked="selectedAnimals.indexOf(animal) > -1"
        ng-required="selectedAnimals.length == 0" /> 
        animal</label>
  </li>                  
</ul>

$scope.toggleAnimal = function(animal)
    var index = $scope.selectedAnimals.indexOf(animal);
    if(index == -1) 
      $scope.selectedAnimals.push(animal);
    
    else
      $scope.selectedAnimals.splice(index, 1);
    

查看完整详情和demo and other related examples