37

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

选中Checkbox时，我希望将该输入元素的值推送到值数组。

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

现在的实现就像这个小提琴。

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

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

4

5 回答 5

37

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

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

请参阅此处以获取更新的小提琴

另一种方法是检查复选框的 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" />

第二小提琴

于 2012-11-27T01:15:36.010 回答
5

一些东西：

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

这是一个更新的小提琴给你

这是代码：

<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;
        });
    };
}​
于 2012-11-26T21:37:45.937 回答
5

我刚刚使用 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>
于 2013-08-15T17:08:03.453 回答
2

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

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

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

于 2012-11-26T21:49:03.847 回答
0 
<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);
    }
}

查看完整的详细信息和演示以及其他相关示例

于 2017-10-22T21:24:37.883 回答