Question

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

当选中复选框时，我希望将该input-element的值推送到值数组。

角度要求验证器似乎观察与输入元素关联的ng模型，但是如何将多个复选框链接到同一模型并使用输入字段的值更新它的值？

现在，实施就像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

使用AngularJS的复选框和必需项

5 个答案: