Использование флажков и требуется с помощью AngularJS

Я попытался использовать атрибут html5 required для моей группы флажков, но я не нашел хороший способ реализовать его с помощью ng-формы.

Когда флажок установлен, я хочу, чтобы значение этого входного элемента было перенесено в массив значений.

Требуемый валидатор angular, похоже, наблюдает за ng-моделью, связанной с элементом ввода, но как я могу связать несколько флажков с одной и той же моделью и обновить ее значение со значением поля ввода?

В настоящее время реализация похожа на эту скрипту.

<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 обрабатывает добавление или удаление из массива значений, но каждый флажок имеет свою собственную модель, и поэтому каждый флажок должен быть проверен, чтобы форма была действительной.

У меня есть работа над группой переключателей, но все они работают на той же модели, что и только один.

Ответы

Ответ 1

Если вы хотите, чтобы кнопка отправки была отключена, если выбор не выбран, самым простым способом является проверка длины массива в атрибуте ng-disabled без установки требуемого атрибута

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

Смотрите здесь обновленную скрипту

Другой способ сделать это - проверить длину массива в 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" />

Вторая скрипка

Ответ 2

Несколько вещей:

  • Я бы пошел с подходом, который просто обновил весь массив в этом случае, так как это немного упростило бы код. (Возможно, вы не захотите этого делать, если вы делаете что-то с состоянием с содержимым массива $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;
        });
    };
}​

Ответ 3

Я просто добавил скрытый ввод с ng-моделью, что и ваша 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>

Ответ 4

Почему бы не сделать ваши флажки моделей массивом

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

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

Ответ 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);
    }
}

См. полную информацию и демо и другие связанные примеры