使用複選框，並需要與AngularJS

Question

我試過使用HTML5 required屬性爲我的複選框組，但我沒有找到一個很好的方式來實現它與ng形式。

當一個複選框被選中時，我希望該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要求的屬性

<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。這使驗證管理與角度的內置驗證（如果你關心的話）更容易一些
• 如果您的<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

爲什麼不把你的複選框車型陣列

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

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

Answer 4

我只是添加了NG-model的隱藏輸入這是與您的NG-模型的單選按鈕：

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