使用复选框并且需要 AngularJS

Question

我尝试为我的复选框组使用 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 函数处理值数组的添加或删除，但每个复选框都有自己的模型，这就是为什么需要检查每个复选框以使表单有效的原因。

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

Answer 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

Answer 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;
        });
    };
}​

Answer 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>

Answer 4

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

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

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

Answer 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