Sử dụng hộp kiểm và được yêu cầu với AngularJS

Question

Tôi đã cố gắng sử dụng thuộc tính html5 required cho nhóm hộp kiểm của mình nhưng tôi không tìm thấy cách hay để triển khai nó bằng biểu mẫu ng.

Khi chọn hộp kiểm Tôi muốn giá trị của yếu tố đầu vào đó được đẩy vào một mảng giá trị.

Trình xác thực yêu cầu góc dường như xem mô hình ng được liên kết với yếu tố đầu vào, nhưng làm cách nào tôi có thể liên kết một số hộp kiểm với cùng một kiểu và cập nhật giá trị của nó bằng giá trị của trường nhập?

Ngay bây giờ việc triển khai giống như 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>​ 

Các updateQuestionValue chức năng xử lý các thêm hoặc loại bỏ từ mảng các giá trị nhưng mỗi hộp kiểm của nó có mô hình riêng và đó là lý do tại sao mỗi hộp kiểm cần được kiểm tra theo thứ tự cho các hình thức có giá trị.

Tôi đã làm cho nó hoạt động trên một nhóm nút radio, nhưng tất cả đều hoạt động trên cùng một kiểu như chỉ có một mẫu có thể được chọn.

Answer 1

Nếu bạn muốn nút gửi vô hiệu hóa nếu không có lựa chọn được chọn cách dễ nhất là để kiểm tra độ dài của mảng trong thuộc tính ng khuyết tật, mà không cần thiết lập các thuộc tính cần thiết

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

See here for updated fiddle

Một cách khác để làm điều này sẽ được kiểm tra độ dài mảng trong thuộc tính ng-yêu cầu của các hộp kiểm

<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

Một vài điều:

• tôi sẽ đi với một cách tiếp cận mà chỉ cần cập nhật toàn bộ mảng trong trường hợp này, vì nó sẽ đơn giản hóa mã một chút. (Bạn có thể không muốn làm điều này nếu bạn đang làm bất cứ điều gì nhà nước với nội dung mảng $ scope.value, nhưng nó không giống như bạn đang có).
• bạn chỉ có thể sử dụng <form> thay vì <ng-form>.
• di chuyển chức năng gửi ra khỏi nút ng-click và vào biểu mẫu ng-submit. Điều này giúp việc quản lý xác thực trở nên dễ dàng hơn một chút với xác thực tích hợp của góc cạnh (nếu bạn quan tâm đến điều đó)
• Nếu bạn <label> kết thúc <input> bạn không cần thuộc tính for="".

Here is an updated fiddle for you

Và đây là đoạn code:

<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

Tại sao không làm mô hình hộp kiểm của bạn mảng

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

Fiddle: http://jsfiddle.net/thbkA/1/

Answer 4

Tôi chỉ cần thêm một đầu vào ẩn với ng-mô hình đó là giống như ng-mô hình của bạn cho nút radio:

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

Xem chi tiết đầy đủ và demo and other related examples